img.onload不执行

Question

问题描述

用canvas生成base64 传给后端，现在遇到的问题是图片的onload不执行,(如果把img.complete这个注释解开的话会报一个ACAO的跨域问题！)

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

知道onload事件不触犯的话有两个原因：
1跨域
2src加载的顺序（scr 尝试过放在onload之前，也是触发）

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
//HTML页面的
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:$('#pic'),
src:'222.jpg',
pictureName:'image/jpeg'//base64 的文件格式

});
console.log('这是html')
console.log(get_base64);
//js
// 图片加载完毕
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;  

}
// 生成base64
canvas_To_Base64({ax,ay,aw,ah,a_pic,src,pictureName}){// 确保图片加载完成之后

  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 在canvas中的起始位置，aw ah 显示的宽度和高度  
  imgContext.drawImage(this,ax,ay,aw,ah,0,0,aw,ah);
  })
  console.log('结束64','3')
  return  imgCanvas.toDataURL(pictureName);

}

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

控制台没有报错，onload函数不执行
在图片是本地的时候，是可以实现的，这个方法！生成base64形成的图片也是正确的

Answer 1

应该是添加到dom中才执行

Answer 2

建议看看这个，在低版本ios中会直接走onerror事件https://007sair.github.io/201...