CanvasContext2D drawImage（）问题[onload和CORS]

一尘不染

CanvasContext2D drawImage（）问题[onload和CORS]

javascript

我试图在获得图像之前先在画布上绘制图像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” 。

这是什么意思？

阅读 567

2020-04-25

共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来获取图像数据，如果 服务器 设置不正确，您将无法绕开它。
另外，某些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);

2020-04-25