Question

我正在尝试将facebook图片转换为base64，但 FileReader 将无法在IE9上运行，因此我决定使用画布。

无论如何，使用canvas还会产生一个问题：

SCRIPT5022：DOM异常：SECURITY_ERR（18）

这是我的代码：

var url="http://graph.facebook.com/1420060541/picture?width=320&height=320";
 var canvas = document.createElement('CANVAS'),
 ctx = canvas.getContext('2d'),
 img = new Image;

 img.onload = function () {
  canvas.height = img.height;
  canvas.width = img.width;
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL('image/jpg');
  console.log(dataURL);
  canvas = null;
};
img.setAttribute('crossOrigin','anonymous');
img.src = url;

Answer 1

<强>更新

似乎facebook确实有交叉原始标题Access-Control-Allow-Origin : "*"，允许任何人查看图像。如果您尝试加载图像，忘记添加img.setAttribute('crossOrigin','anonymous');添加它，第二次将失败，因为缓存的图像正在干扰请求标头。清空缓存并使用img.setAttribute('crossOrigin','anonymous');再次发送请求，以解决您的问题。

跨域错误。没有解决方案。图片必须来自同一个域，因此您需要将图片移动到您的域中（如果有的话）。或者在您的计算机上设置服务器并将映像移动到该目录上。如果您的域名为www.privateDomain.com，则只能通过privateDomain访问toDataURL中的图片如果您只是使用硬盘驱动器，即您的网页网址以file:///开头，则无法通过toDataURL访问任何图片。

有一些例外，因为某些服务器会发送带有允许跨域访问的图像的标头。这种图像的一个来源是wiki commons。还有其他人，但你必须搜索它们。

另一个解决方案是关闭浏览器上的网络安全性（我不知道如何在IE上），但这会让您的浏览器受到攻击。

令人遗憾的是，我们甚至无法信任图像，但事实就是如此。

IE9：canvas.toDataURL SECURITY_ERR

1 个答案: