CanvasContext2D drawImage()问题[onload和CORS]

Question

我想在我得到它之前在画布上绘制一个图像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中,它是"未捕获的安全错误:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布." ,
在IE上,我只得到"SecurityError".

这是什么意思 ？

Answer 1

您必须等待图像已加载,然后才能在画布上绘制它.

为此,只需使用元素的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".

Nota Bene:CORS 标头由服务器发送,该cross-origin属性只会让它知道您要使用CORS来获取图像数据,如果服务器设置不正确,您绝不能绕过它.
还有一些UserAgents(IE和Safari)仍未实现此属性.

边缘情况:如果您的某些图像来自您的服务器而某些图像来自符合CORS的图像,那么您可能希望使用onerror事件处理程序,如果您将cross-origin属性设置"anonymous"为非CORS服务器,则应该触发该事件处理程序.

function corsError(){
  this.crossOrigin='';
  this.src='';
  this.removeEventListener('error', corsError, false);
} 
img.addEventListener('error', corsError, false);