Javascript CanvasContext2D drawImage（）问题[onload和CORS]

在获取图像的

dataURL（）

之前，我试图在画布上绘制图像，但返回的数据像是空的

当我在控制台中检查它时，我看到字符串中有很多

a

（

“数据：image/png；base64，iVBO..一些随机字符…bqhfoaaaaaaaaaaaa…很多…aaaaaasuvork5cyii=“

）

当我尝试将画布附加到文档时，也不会绘制任何内容，并且控制台中不会抛出任何错误

这里有什么问题

这是我的密码：

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上我只得到了“安全错误”

---

这意味着什么？

在画布上绘制图像之前，您必须等待图像已加载

为此，只需使用

元素的

load

事件处理程序：

另外，对于画布“

context.toDataURL（）

和

context.getImageData

要正常工作，您必须在中获取图像资源，否则画布将被“污染”，这意味着获取像素数据的任何方法都将被阻止

• 如果图像来自同一服务器，则没有问题
• 如果您的映像是从外部服务器提供的，请确保它允许您的映像位于其跨源标题中，并将

  img.crossOrigin

  设置为

  “使用凭据”

• 如果服务器允许匿名请求，您可以将

  img.crossOrigin

  设置为

  “匿名”

注意：头由服务器发送，

跨源

属性只会让它知道您想使用CORS获取图像数据，如果服务器设置不正确，您无法绕过它。
还有一些用户代理（IE和Safari）还没有实现这个属性

边缘案例：如果您的一些图像来自您的服务器，而另一些图像来自符合CORS标准的服务器，那么您可能希望使用

onerror

事件处理程序，如果您在非CORS服务器上将

跨源
属性设置为
“匿名”
，则应触发该事件处理程序

// 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";

这篇文章是为了成为我们每周20多篇关于这个问题的经典文章。请让我知道它是否可以改进。不仅仅是在使用图像之前加载图像的意义更重要吗？如果您认为参考toDataURL是有用的，那么您应该提到（可能的）CORS问题。无论如何，维基的想法/努力+1。@gamealchest你是对的，我尝试将这两个问题结合起来，因为它们非常相似，而且经常成对出现。我在回答中谈到了CORS问题。我不知道搜索引擎会如何处理这个问题，也许我应该在问题中添加“canvas is tainted”（画布被污染）的消息错误。不管怎样，我要求这个问题也转换成wiki，这样你就可以编辑它了。
function corsError(){
  this.crossOrigin='';
  this.src='';
  this.removeEventListener('error', corsError, false);
} 
img.addEventListener('error', corsError, false);