CanvasContext2D drawImage() 问题 [onload 和 CORS]

IT技术 javascript canvas html5-canvas
2021-01-15 05:34:30

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

这是什么意思 ？

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"。

Note Bene : CORS 头是服务器发送的，该cross-origin属性只会让它知道您要使用 CORS 来获取图像数据，如果服务器设置不正确，则无法绕过它。
还有一些用户代理（IE 和 Safari）仍然没有实现这个属性。

边缘情况：如果您的一些图像来自您的服务器，而另一些来自符合 CORS 的图像，那么您可能需要使用onerror事件处理程序，如果您在非 CORS 服务器上将cross-origin属性设置为 ，则应该触发该事件处理程序"anonymous"。 

function corsError(){
  this.crossOrigin='';
  this.src='';
  this.removeEventListener('error', corsError, false);
} 
img.addEventListener('error', corsError, false);
其它你可能感兴趣的问题
上一篇如何使用 JavaScript 读取 CSS 规则值？ 下一篇使用 $scope.$emit 和 $scope.$on