Javascript 画布安全模型是否忽略访问控制允许源标题？

看起来，即使您将access control allow origin标头设置为允许从mydomain.org访问domain example.org上托管的图像，画布的origin clean标志也会设置为false，并且尝试操作该图像的像素数据将触发安全异常

---

canvas不应该遵守access control allow origin标头并允许在不引发异常的情况下访问图像数据吗？

access control allow origin标头仅适用于跨域

XmlHttpRequest

。

标记不支持该属性，因此您正在尝试的内容将无法工作

看

---

唯一的选择是通过自己的服务器代理图像。

除非我完全看错了，否则规范似乎建议它将与画布一起工作——请参阅用例下的“不污染画布元素”部分：

它具体讨论了将带有access control allow origin标头的远程图像绘制到画布中，然后在画布上调用toDataURL（）

---

也许浏览器还没有赶上这一点，但至少我是这样阅读规范的。

事实上，如果图像具有值为“匿名”的“crossOrigin”属性，canvas确实尊重“access control allow origin”

在固定示例中效果相当好：

var ctx=document.getElementById（'c'）.getContext（'2d'），
img=新图像（）；
img.crossOrigin='匿名'；
img.src=https://lh3.googleusercontent.com/-LAFgeyNL894/AAAAAAAAAAI/AAAAAAAAAAA/-CWBGs9xLXI/s96-c/photo.jpg';
img.onload=函数（）{
ctx.drawImage（img，0,0）；
试一试{
var imgData=ctx.getImageData（0,01000）；
$（'.button'）。在（'click'，函数（e）上{
e、 预防默认值（）；
applyFilter（ctx、imgData）；
});
}捕捉（错误）{
$（'.button'）.hide（）；
$（'body'）.append（“拒绝访问”）；
控制台日志（err）；
}
};
函数applyFilter（ctx，数据）{
对于（var x=0；x

---

（我仅将jQuery用于DOM操作和事件处理）

对，因此使用

XmlHttpRequest

来实现这一点不会引发异常？对于小图像，可以使用XmlHttpRequest获取它，然后在JavaScript中生成数据URI:。这适用于Firefox和Chrome。有关Internet Explorer的提示，请参阅。（我没有测试他的解决方案。）Downvoter-请留下一条评论，为什么你认为这个答案是错误的。哇，我真的很难做到这一点。这是我的关键。有同样的问题，修复了所有的标题。这是最后一块。嗯，这在IE10中似乎不起作用-其他人能确认吗？有人有在IE10中运行的修复程序吗？（我有一个悬赏问题——根据Mozilla的网站，这在Chrome 13、Firefox 8中得到了支持，在IE或Opera中根本不起作用。随着时间的推移，情况可能会发生变化：不幸的是，设置

img.crossOrigin='anonymous'；

在Safari 9.x中不起作用……这就是安全异常阻止图像被删除的地方。）ng链接/下载。

var ctx = document.getElementById('c').getContext('2d'),
    img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://lh3.googleusercontent.com/-LAFgeyNL894/AAAAAAAAAAI/AAAAAAAAAAA/-CWBGs9xLXI/s96-c/photo.jpg';

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    try {
        var imgData = ctx.getImageData(0, 0, 100, 100);
        $('.button').on('click', function(e) {
            e.preventDefault();
            applyFilter(ctx, imgData);
        });
    } catch(err) {
        $('.button').hide();
        $('body').append("Access denied");
        console.log(err);
    }
};
function applyFilter(ctx, data) {
    for (var x = 0; x < data.width; x++) {
        for (var y = 0; y < data.height; y++) {
            var index = 4 * (y * data.width + x);
            data.data[index] = data.data[index] - 50; //r
            data.data[index+1] = data.data[index+1] - 50; //g
            data.data[index+2] = data.data[index+2] - 50; //b
            data.data[index+3] = data.data[index+2] - 50; //a
        }
    }
    ctx.putImageData(data, 0, 0);
}