problem description
the location of the canvas screenshot is different from the actual generated base64
the environmental background of the problems and what methods you have tried
I know two sets of dimensions for canvas: one is the size of the element itself, and the other is the size of the drawing surface of the canvas element
related codes
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);//thisImage
};
}
// 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 canvasaw ah
console.log("this",this);
console.log("imgCanvas",imgCanvas);
imgContext.drawImage(this,ax,ay,aw,ah,0,0,aw,ah);
})
return imgCanvas.toDataURL(pictureName);
}
}/ / Click to get the coordinates
$("-sharpLaui_option_start").click(function(e){
var area_gather = new get_Areabox(); // ES6 class
var arr_coord = area_gather.get_Area_Box($(".box"),$("-sharpLaui_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, "");
}
})
what result do you expect? What is the error message actually seen?
the correct screenshot should be the yellow block, but now it is on the other side of the date