problem description
use canvas to generate base64 and send it to the backend. The problem now is that the onload of the image does not execute. (if you unlock the comment img.complete, you will report a cross-domain problem of ACAO!)
the environmental background of the problems and what methods you have tried
there are two reasons for knowing that onload events are not offended:
1 Cross-domain
2src loading order (scr tried to put before onload, also triggered)
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / HTML page
var get_base64 = area_gather.canvas_To_Base64 ({
ax:arr_coord[i].x,//left
ay:arr_coord[i].y,//top
aw:arr_coord[i].w,
ah:arr_coord[i].h,
a_pic:$("-sharppic"),
src:"222.jpg",
pictureName:"image/jpeg"//base64 });
console.log ("this is html")
console.log (get_base64);
/ / js
/ / Picture loaded
imgLoaded (url,callback) {
var img = new Image(); //Image
img.id = "pic";
console.log("onload")
// if (img.complete) { //
// callback.call(img);
// return; // onload
// }
img.onload = function () { //callback
callback.call(img);
};
img.src = url; }
/ / generate base64
canvas_To_Base64 ({ax,ay,aw,ah,a_pic,src,pictureName}) {/ / make sure the picture is loaded
var imgCanvas = $("<canvas id="canvas">")[0];
var imgContext = imgCanvas.getContext("2d");
console.log("onload","1")
this.imgLoaded(src,function(){
console.log("onload","5")
// var biliw = this.width/a_pic[0].width;
// var bilih = this.height/a_pic[0].height;
imgCanvas.width = aw;
imgCanvas.height = ah;
// console.log(imgCanvas);
console.log("base64");
//image ax ay aw ah
// 0 0 canvasaw ah
imgContext.drawImage(this,ax,ay,aw,ah,0,0,aw,ah);
})
console.log("64","3")
return imgCanvas.toDataURL(pictureName);}
what result do you expect? What is the error message actually seen?
The console does not report an error, the onload function does not execute
when the picture is local, it can be achieved, this method! The image generated by base64 is also correct