javascript - IE9 : canvas. toDataURL SECURITY_ERR

Question

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

无论如何，使用 Canvas 也会产生一个问题:

SCRIPT5022: DOM Exception: 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 确实有跨源 header Access-Control-Allow-Origin : "*"允许任何人查看图像。如果您尝试加载图像时忘记添加 img.setAttribute('crossOrigin','anonymous');，那么第二次添加将会失败，因为缓存的图像会干扰请求 header 。清空缓存并使用 img.setAttribute('crossOrigin','anonymous'); 再次发送请求，这可能会解决您的问题。

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

也有异常(exception)，因为某些服务器会发送带有允许跨域访问的图像的 header 。此类图像的来源之一是维基共享资源。还有其他的，但你必须搜索它们。

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

令人遗憾的是我们甚至不能相信图像，但事实就是如此。