带有模式安全错误的 Internet Explorer 11 fillStyle答案

【问题标题】：Internet Explorer 11 fillStyle with pattern security error带有模式安全错误的 Internet Explorer 11 fillStyle
【发布时间】：2014-03-20 10:55:41
【问题描述】：

我得到了这个在 Chrome、Safari 和 Firefox windwos/mac 中工作的脚本，但在 IE 11 中因安全错误而失败。

http://jsfiddle.net/YkVgA/1/

知道在我用另一个域的纹理填充画布后如何从该画布获取图像数据吗？

该图像启用了交叉原点。

<body><canvas id="mycanvas"></canvas>

var ctx = document.getElementById('mycanvas').getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50';
img.onload = function () {
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);
    var inData = ctx.getImageData(0, 0, 150, 150)
}

【问题讨论】：

.crossOrigin 仅受 Chrome 和 Firefox 支持。见this。

标签： javascript html5-canvas internet-explorer-11

【解决方案1】：

正如 fzzle 在 cmets 中指出的那样，IE 不（还）支持图像的跨域请求。

可能的解决方案

在这种客户端无法请求使用 CORS 的特殊情况下，选项有些受限，因此您必须：

创建与页面同源的图像副本
使用服务器上的代理页面请求图像，然后将其提供给同一来源的客户端

【讨论】：