Question

似乎即使您将access-control-allow-origin标头设置为允许从mydomain.org访问域example.org上托管的图像，画布'origin-clean标志也会设置为false，并尝试操纵该图像的像素数据将触发安全异常。

不应该使用canvas'遵循access-control-allow-origin标头并允许访问图像的数据而不抛出异常吗？

Answer 1

实际上，如果图像具有值为“anonymous”的“crossOrigin”属性，canvas会尊重“access-control-allow-origin”。

在固定示例中运行良好：http://jsfiddle.net/WLTqG/29/

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);
}

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

Answer 2

除非我完全读错了，否则规范似乎暗示将与canvas一起使用 - 请参阅用例下的“不要污染画布元素”部分：

http://www.w3.org/TR/cors/#use-cases

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

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

Answer 3

access-control-allow-origin标头仅适用于跨域XmlHttpRequest。 <canvas>标记不尊重该属性，因此您尝试的内容将无效。

请参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

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

画布安全模型是否忽略access-control-allow-origin标头？

3 个答案: