Javascript CORS 图像/画布操作答案

【问题标题】：Javascript CORS image / canvas manipulationJavascript CORS 图像/画布操作
【发布时间】：2013-09-19 16:55:49
【问题描述】：

我正在尝试从我已配置为允许 CORS 的另一个域中检索图像并操纵像素，然后我想显示结果并能够操纵结果。我可以在我请求的图像上同时使用 getImageData 和 toDataURL，所以我知道服务器部分可以工作。但是，当我尝试将图像的 src 属性更改为画布中的 dataURL 时，出现安全错误“跨域资源共享策略拒绝跨域图像加载。”。

function manipulateImage(img, func) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    c = canvas.getContext('2d');
    c.drawImage(img, 0, 0);

    width = canvas.width;
    height = canvas.height;
    imageData = c.getImageData(0, 0, width, height);
    y = 0;
    while (y < height) {
        x = 0;
        while (x < width) {
            var pixel = getPixel(imageData, x, y);
            func(pixel);
            setPixel(imageData, x, y, pixel);
            x++;
        }
        y++;
    }
    c.putImageData(imageData, 0, 0);
    console.log('done');
    img.src = canvas.toDataURL();
}


$(function() {
    img = new Image();
    img.crossOrigin = '';
    img.onload = function() {
        document.body.appendChild(img);
    }
    img.src = 'https://choros-cognition-test.s3.amazonaws.com/geotiffs/X8pEm_cl3_sm16_ra15_style_warp.png'

    $('#increase-button').on('click', function() {
        manipulateImage(img, function(pixel) {
            pixel[2] += 30;
        });
    });
});

奇怪的是，如果我在操作图像函数中将图像的 crossOrigin 属性重置为 null，那么它会起作用。为什么是这样？

function manipulateImage(img, func) {
    img.crossOrigin = null;
    ....

【问题讨论】：

标签： javascript html canvas cross-domain cors

【解决方案1】：

我查了docs on the crossorigin atribute。

以下是相关信息：

跨域 HTML5

此枚举属性指示是否必须使用 CORS 来获取相关图像。启用 CORS 的图像可以在元素中重复使用而不会被污染。允许的值为：

匿名
执行跨域请求（即带有 Origin: HTTP 标头）。但是没有发送凭证（即没有发送 cookie、没有 X.509 证书和没有发送 HTTP 基本身份验证）。如果服务器没有向源站点提供凭据（通过不设置 Access-Control-Allow-Origin: HTTP 标头），图像将被污染并且其使用受到限制..

使用凭据
执行跨域请求（即使用 Origin: HTTP 标头）并发送凭据（即执行 cookie、证书和 HTTP 基本身份验证）。如果服务器没有向源站提供凭据（通过 Access-Control-Allow-Credentials: HTTP 标头），图像将被污染并限制其使用。

当资源不存在时，在没有 CORS 请求的情况下获取资源（即不发送 Origin: HTTP 标头），从而防止其在元素中被非污染使用。如果无效，则按枚举关键字匿名处理。

所以我的猜测是 null 与不存在或无效相同，在这种情况下它会像匿名一样处理。

【讨论】：