浏览器画布CORS支持跨域加载图像操作 [英] Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
问题描述
问题：什么浏览器版本支持在Canvas中使用的跨域图像的CORS（跨源资源共享）标头？
CORS可应用于跨域XMLHttpRequests和图像请求。这个问题是关于图片要求我的常见问题是浏览器版本相容性 http://caniuse.com/cors
我找到了一个最近的chrome开发博客，暗示CORS支持在现代浏览器中广泛传播，但可能会破坏，因为的WebGL安全问题。
http： //blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
更多关于CORS的详细信息：
我们正在考虑使用画布& CORS，具有跨域图像请求，如W3C工作草案中所述 http://www.w3.org/TR/ cors /＃use-cases 。 html canvas使用CORS允许跨域资源的使用方式类似于flash使用crossdomain.xml的方式。基本上，我们想读取/编辑图像数据像素，我们不想使用相同的源代理服务器。
通常，如果图像加载跨域并且与html canvas一起使用，使用诸如canvas.toDataURL（）之类的函数访问像素将抛出一个安全错误。但是，如果发送图片的服务器添加了这样的标题，则应允许跨域使用。
allow-origin：*
我们关心的浏览器： >
我们正在计划解决IE的缺乏使用闪存的画布支持，所以对于具有CORS问题的桌面浏览器，我们可以做到这一点，但是在移动闪存不是一个选项，并使用代理来使请求的同源不是我们的用例中的一个选项。所以，我特别感兴趣的是Andriod，Iphone，IPAD浏览器对CORS的支持。
测试结果：错误的新闻，它似乎只能在Chrome中使用。
所有其他浏览器（包括Android Mobile）会出现这样的错误：
失败：DOM异常：SECURITY_ERR ）
移动设备我测试了Android（三星Galaxy内核版本2.6.32.9 ），Iphone和IPAD V1，它在所有三个失败。
您可以使用以下网址测试自己的移动设备：
http： //maplarge.com/CrossOriginImageTest.html
测试脚本：
<！DOCTYPE html>
< html>
< head>
< title> Canvas Cross Origin Image Test：测试Canvas Cross Domain Image CORS支持< / title>
< script type =text / javascript>
function initialize（）{
//如果没有画布支持就会失败
try {
var can = document.getElementById（'mycanvas'）;
var ctx = can.getContext（'2d'）;
var img = new Image（）;
img.crossOrigin ='';
//域需要不同于html页面域来测试跨来源安全性
img.src ='http://lobbydata.com/Content/images/bg_price2.gif';
} catch（ex）{
document.getElementById（results）。innerHTML =< span style ='color：Red;'> Failed：+ ex.Message +< / span>;
}
如果安全错误
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（）; //如果读取成功，画布不脏。
//获取像素
var imgd = ctx.getImageData（0，0，img.width，img.width）;
var pix = imgd.data;
var len = pix.length;
var argb = []; //像素为int
for（var i = 0; i 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;'> +
成功：您的浏览器支持Canvas中的跨域图片的CORS< br>+
在+时间+ms< / span>中读取+ argb.length +
} catch（ex）{
document.getElementById（results）。innerHTML =}
}
}
< / script>
< / head>
< body onload =initialize（）>
< h2> Canvas Cross起源图像测试：测试Canvas Cross Domain Image CORS支持< / h2>
< h2>< a href =http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html>什么是CORS图片安全？< / a>< / h2>
< h1 id =resultsstyle =color：Orange;>测试...< / h1>
< canvas id =mycanvas>< / canvas>
< br />
< a href =/ Example / List>更多示例< / a>
< / body>
< / html>
QUESTION: What browser versions support CORS (Cross-Origin Resource Sharing) headers for Cross Domain Images used in Canvas?
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.
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
More detail on CORS:
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.
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: *
Browsers We Care Most About:
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.
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)
Mobile Devices I tested Android (samsung galaxy kernel version 2.6.32.9), Iphone and IPAD V1 and it failed in all three.
You can test your own mobile device with this URL: http://maplarge.com/CrossOriginImageTest.html
The Test Script:
<!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屋！
