问题描述

canvas 截图的位置 和实际生成的base64 生成的是不一样的

问题出现的环境背景及自己尝试过哪些方法

我知道canvas两套尺寸：一个是元素本身的尺寸，还有另一个是canvas元素绘图表面的尺寸

相关代码

class get_Areabox{
// 图片加载完毕
    imgLoaded(url,callback){
    var img = new Image(550,780); //创建一个Image对象，实现图片的预下载  
    img.src = url;  
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
      callback.call(img);  
      return; // 直接返回，不用再处理onload事件  
    }  
    img.onload = function () { //图片下载完毕时异步调用callback函数。  
      callback.call(img);//将回调函数的this替换为Image对象 页面只需要图片加载完成一次
    };
 }

  // 生成base64
  canvas_To_Base64({ax,ay,aw,ah,src,pictureName}){// 确保图片加载完成之后
  var imgCanvas = $("<canvas id='canvas' width='550' height='780'>")[0];
  var imgContext = imgCanvas.getContext("2d");
  this.imgLoaded(src,function(){
    //  定义了从image中截取一部分 ax ay 起始位置，aw ah 宽度
    //  0 0 在canvas中的起始位置，aw ah 显示的宽度和高度
    console.log('this',this);
    console.log('imgCanvas',imgCanvas);
    imgContext.drawImage(this,ax,ay,aw,ah,0,0,aw,ah);
  })
  return  imgCanvas.toDataURL(pictureName);
  }
}

//点击获取坐标

  $("#Laui_option_start").click(function(e){    
  var area_gather = new get_Areabox();  // ES6 class 构造函数
  var arr_coord = area_gather.get_Area_Box($('.box'),$("#Laui_img"));  // 获取到黄色top  left 宽 高
for(var i in arr_coord){
  var aa = area_gather.canvas_To_Base64({    //把获取到黄色top  left 宽 高  截图出来生成base64
    ax:arr_coord[i].x,//left
    ay:arr_coord[i].y,//top
    aw:arr_coord[i].w,
    ah:arr_coord[i].h,
    src:'222.jpg',
    pictureName:'image/jpeg'//base64 的文件格式
  });
  console.log(aa, '这里是坐标');
}
})

你期待的结果是什么？实际看到的错误信息又是什么？

截图正确的应该是黄色块 但是现在跑到日期的那边了