我试图在获取其 dataURL() 之前在画布上绘制图像，但返回的数据为空。当我在控制台中检查时，我看到字符串中有很多 A : (\'data:image/...
我试图在获取图像之前在画布上绘制图像 dataURL() ，但返回的数据是空的。
字符串中 A 有很多 "data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=" )
当我尝试将画布附加到文档时，也没有绘制任何内容，并且控制台中也没有抛出任何错误。
这里有什么问题？
这是我的代码：
var img = new Image();
img.src = "http://somerandomWebsite/picture.png";
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0); // this doesn't seem to work
var dataURL = canvas.toDataURL(); // this will give me a lot of "A"
doSomething(dataURL);
此外，在进行快速刷新时，图像会正确地绘制到画布上，但控制台中出现错误消息并且 dataURL 为空。
Firefox 中的消息是： \'SecurityError：该操作不安全。\' ,
在 Chrome 中它是 \'未捕获的 SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布。\' ,
在 IE 上我只得到 \'SecurityError\' .
这是什么意思 ？
您必须等待图像加载完毕 后 才能在画布上绘制它。
为此，只需使用 load 的事件处理 <img> ：
// create a new image
var img = new Image();
// declare a function to call once the image has loaded
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0);
var dataURL = canvas.toDataURL();
// now you can do something with the dataURL
doSomething(dataURL);
}
// now set the image's src
img.src = "http://somerandomWebsite/picture.png";
此外，为了使画布 context.toDataURL() 正常 context.getImageData 工作，您必须以 跨域兼容的方式 ，否则画布将被“污染”，这意味着任何获取像素数据的方法都将被阻止。
img.crossOrigin 并将 "use-credentials" .
img.crossOrigin 为 "anonymous" .
注意 ： CORS 标头由服务器发送 ，该 cross-origin 服务器 未正确设置， 则无法规避它
一些 UserAgents（IE 和 Safari）也还没有实现此属性。
边缘情况 ：如果您的某些图像来自您的服务器，而某些图像来自符合 CORS 的服务器，那么您可能需要使用 onerror 在非 CORS 服务器上 cross-origin 属性 "anonymous" ，该事件处理程序将触发
function corsError(){
this.crossOrigin='';
this.src='';
this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);