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正常工作，您必须将图像资源放在cross-origin compliant way中，否则画布会被”污染“，这意味着任何获取像素数据的方法将被阻止。

如果您的图片来自同一个服务器，则没问题。
如果您的图片是从外部服务器提供的，请确保它允许您的图片来自其跨源标头，并将img.crossOrigin设置为"use-credentials"。
如果服务器允许匿名请求，您可以将img.crossOrigin设置为"anonymous"。

Nota Bene ：CORS 标头由服务器发送，cross-origin属性只会让它知道您要使用CORS要获取图像数据，如果服务器未正确设置，您绝不能绕过它。
此外，一些UserAgents（IE和Safari）仍未实现此属性。

Edge Case ：如果您的某些图片来自您的服务器，而某些图片来自符合CORS的图片，那么您可能需要使用onerror事件处理程序在非CORS服务器上将cross-origin属性设置为"anonymous"。

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

CanvasContext2D drawImage（）问题[onload和CORS]

1 个答案: