您必须等待图像 完毕才能在画布上绘画。
为此，只需使用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能正常工作，你必须让在你的图像资源跨域兼容的方式，否则画布‘污点’，这意味着任何获得的像素数据的方法将被阻止。
Nota Bene ：CORS ，该cross-origin属性只会让它知道您要使用CORS来获取图像数据，如果 设置不正确，您将无法绕开它。 另外，某些UserAgent（IE和Safari）仍未实现此属性。
边缘案例 ：如果某些图像来自服务器，而某些图像来自CORS兼容的服务器，则您可能需要使用onerror事件处理程序，如果将cross-origin属性设置"anonymous"为非CORS服务器，则该事件处理程序将触发。
function corsError(){
this.crossOrigin='';
this.src='';
this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);
602392714
清零编程群