Javascript CORS 图像/画布操作
Posted
技术标签:
【中文标题】Javascript CORS 图像/画布操作【英文标题】:Javascript CORS image / canvas manipulation 【发布时间】: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;
....
【问题讨论】:
【参考方案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 与不存在或无效相同,在这种情况下它会像匿名一样处理。
【讨论】:
以上是关于Javascript CORS 图像/画布操作的主要内容,如果未能解决你的问题,请参考以下文章