CanvasContext2D drawImage（）问题
我试图在获取dataURL()之前在canvas上绘制图像，但返回的数据是空的。
当我在控制台中检查时，我看到string中有很多A ：（ "data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=" ）
当我尝试将canvas追加到文档中时，也没有绘制任何内容，而且在控制台中没有任何错误。
这里有什么问题？
这是我的代码：
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);
另外，在进行快速刷新时，图像正确绘制到canvas上，但是在控制台中出现错误消息，并且dataURL为空。
Firefox中的消息是： “SecurityError：操作不安全”。 ，
在Chrome中，它是“Uncaught SecurityError：无法执行”toMulticolL“对'HTMLCanvasElement'：感染的canvas可能不会被导出。 ，
而在IE上我只是得到“SecurityError” 。
这是什么意思 ？
您必须等待您的图像已经加载，然后才能在canvas上进行绘制。
为此，只需使用<img>元素的load事件处理程序：
// 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工作正常，您必须以符合交叉原点的方式获取图像资源，否则canvas会“污染”，这意味着任何获取像素数据的方法将被阻止。
- 如果你的图像来自同一台服务器 ，没问题。
- 如果您的图像是从外部服务器提供的 ，请确保它允许您在其跨源标头中，并将
img.crossOrigin设置为"use-credentials"。 - 如果服务器允许匿名请求，则可以将
img.crossOrigin设置为"anonymous"。
Nota Bene ： CORS 头是由服务器发送的 ， cross-origin属性只会让它知道你想用CORS来获取图像数据，如果服务器设置不正确，绝不能绕过它。
另外一些UserAgent（IE和Safari）还没有实现这个属性。
边缘情况 ：如果你的某些图像来自你的服务器，有些来自CORS兼容的图像，那么你可能需要使用onerror事件处理程序，如果你在非CORS上设置cross-origin属性为"anonymous"服务器。
function corsError(){ this.crossOrigin=''; this.src=''; this.removeEventListener('error', corsError, false); } img.addEventListener('error', corsError, false);
