IE9：canvas.toDataURL SECURITY_ERR

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，则只能通过toDataURL 访问来自privateDomain 的图像 如果您只是使用硬盘驱动器，即您的页面 url 以 file:/// 开头，则无法通过 toDataURL 访问任何图像。

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

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

很遗憾，我们连图片都不能信任，但事实就是这样。