浏览器画布 CORS 支持跨域加载图像操作 [英] Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
问题描述
问题:哪些浏览器版本支持 Canvas 中使用的跨域图像的 CORS(跨域资源共享)标头?
QUESTION: What browser versions support CORS (Cross-Origin Resource Sharing) headers for Cross Domain Images used in Canvas?
CORS 可以应用于跨域 XMLHttpRequests 和图像请求.这个问题是关于图像请求我通常去浏览器版本兼容性http://caniuse.com/cors不清楚这个问题，谷歌搜索没有产生好的结果.
CORS can apply to both cross domain XMLHttpRequests and to image requests. This question is about image requests My normal go to for browser version compatibility http://caniuse.com/cors is unclear on the issue and google search yields no good results.
我确实发现了最近的 chrome 开发博客，暗示 CORS 支持在现代浏览器中广泛传播，但可能会因 WebGL 安全问题而中断.
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
I did find a recent chrome development blog implying that CORS support was wide spread in modern browsers but might break because of WebGL security problems.
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
关于 CORS 的更多细节:
我们正在考虑使用 canvas & 的可行性具有跨域图像请求的 CORS，如 W3C 工作草案 http://www.w3.org/TR/中所述cors/#use-cases.html canvas 使用 CORS 以允许跨域资源使用，其方式类似于 flash 使用 crossdomain.xml 的方式.基本上，我们想要读取/编辑图像数据像素，我们不想使用同源代理服务器.
We're considering the viability of using canvas & CORS with cross domain image requests as described in the W3C Working Draft http://www.w3.org/TR/cors/#use-cases. CORS is used by html canvas to allow cross domain resource usage in a fashion similar to the way flash uses crossdomain.xml. Basically, we want to read/edit the image data pixels and we don't want to use a same origin proxy server.
通常，如果图像跨域加载并与 html canvas 一起使用，则使用 canvas.toDataURL() 等函数访问像素将引发安全错误.但是，如果发送图像的服务器添加了这样的标头，则应该允许跨域使用.
Normally, if are images loaded cross domain and used with html canvas, accessing pixels using functions like canvas.toDataURL() will throw a security error. However, If the server delivering the image adds a header like this, the cross domain usage should be allowed.
access-control-allow-origin: *
我们最关心的浏览器:
我们计划使用 flash 解决 IE 缺乏画布支持的问题，因此对于有 CORS 问题的桌面浏览器，我们也可以这样做，但在移动 flash 上不是一种选择，并且使用代理来使请求相同在我们的用例中，origin 不是一个选项.所以，我对 Android、Iphone、IPAD 浏览器对 CORS 的支持特别感兴趣.
We are planning to work around IE's lack of canvas support using flash, so for desktop browsers with a CORS problem we can do that as well, but on mobile flash is not an option, and using a proxy to make the requests same origin is not an option in our use case. So, I'm particularly interested in Andriod, Iphone, IPAD browser support for CORS.
推荐答案
测试结果:坏消息，它似乎只适用于 Chrome.所有其他浏览器(包括 Android 手机)都会出现这样的错误:
Test Results: Bad News, it appears to only work in Chrome. All other browsers (including Android Mobile) give an error like this:
Failed: DOM Exception: SECURITY_ERR (18)
移动设备 我测试了 Android(三星 Galaxy 内核版本 2.6.32.9)、Iphone 和 IPAD V1，但在这三个方面都失败了.
Mobile Devices I tested Android (samsung galaxy kernel version 2.6.32.9), Iphone and IPAD V1 and it failed in all three.
您可以使用以下网址测试您自己的移动设备:http://maplarge.com/CrossOriginImageTest.html
You can test your own mobile device with this URL: http://maplarge.com/CrossOriginImageTest.html
测试脚本:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</title>
<script type="text/javascript">
function initialize() {
//will fail here if no canvas support
try {
var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.crossOrigin = '';
//domain needs to be different from html page domain to test cross origin security
img.src = 'http://lobbydata.com/Content/images/bg_price2.gif';
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
}
//will fail here if security error
img.onload = function () {
try {
var start = new Date().getTime();
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var url = can.toDataURL(); // if read succeeds, canvas isn't dirty.
//get pixels
var imgd = ctx.getImageData(0, 0, img.width, img.width);
var pix = imgd.data;
var len = pix.length;
var argb = []; //pixels as int
for (var i = 0; i < len; i += 4) {
argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
}
var end = new Date().getTime();
var time = end - start;
document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
"Success: Your browser supports CORS for cross domain images in Canvas <br>"+
"Read " + argb.length+ " pixels in "+ time+"ms</span>";
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
}
}
}
</script>
</head>
<body onload="initialize()">
<h2>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</h2>
<h2><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">What is CORS Image Security?</a></h2>
<h1 id="results" style="color:Orange;">Testing...</h1>
<canvas id="mycanvas"></canvas>
<br />
<a href="/Example/List">More Examples</a>
</body>
</html>
这篇关于浏览器画布 CORS 支持跨域加载图像操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
