我正在尝试从另一个域中检索图像,该域已配置为允许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;
});
});
});
奇怪的是,如果我在 manipulateImage 函数中将图像的 crossOrigin 属性重置为 null,那么它可以工作。这是为什么呢?
function manipulateImage(img, func) {
img.crossOrigin = null;
....
好吧,我查找了有关跨源属性的文档。
以下是相关信息:
跨源HTML5
此枚举属性指示是否必须使用 CORS 完成相关图像的提取。 启用 CORS 的图像可以在元素中重用而不会受到污染。允许的值为:
匿名
执行跨源请求(即使用源:HTTP 标头)。但不发送凭据(即不发送 cookie、不发送 X.509 证书和 HTTP 基本身份验证)。如果服务器没有向源站点提供凭据(通过不设置访问控制允许源:HTTP标头),则图像将被污染并限制其使用。
使用凭据
跨源请求(即使用Origin:HTTP标头)执行,并发送凭据(即执行cookie,证书和HTTP Basic身份验证)。如果服务器未向源站点提供凭据(通过访问控制允许凭据:HTTP 标头),则图像将被污染并限制其使用。
当不存在时,在没有 CORS 请求的情况下获取资源(即不发送 Origin: HTTP 标头),防止其在元素中使用。如果无效,则将其处理为使用枚举的关键字匿名。
所以我的猜测是,null要么与不存在相同,要么无效,在这种情况下,它被处理为匿名。