情商：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'); 的图像，第二次添加将失败，因为缓存的图像干扰了请求 headers。清空缓存并使用 img.setAttribute('crossOrigin','anonymous'); 再次发送请求，这可能会解决您的问题。

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

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

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

遗憾的是我们连图像都不能相信，但事实就是如此。

情商：canvas.toDataURL SECURITY_ERR

IE9: canvas.toDataURL SECURITY_ERR

html

javascript

base64

canvas