浏览器画布CORS支持跨域加载图像操作
问题:在画布中使用的跨域图片浏览器版本支持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使用CORS以类似flash使用crossdomain.xml的方式允许跨域资源的使用。基本上，我们希望读取/编辑图像数据像素，而不希望使用相同的源代理服务器。
通常，如果图像跨域加载并与html画布一起使用，则使用canvas.toDataURL()之类的函数访问像素会引发安全错误。但是，如果传送映像的服务器添加了这样的标题，则应该允许跨域使用。
access-control-allow-origin: *我们最关心的浏览器：
我们计划解决IE缺乏使用flash的画布支持的问题，因此对于有CORS问题的桌面浏览器，我们也可以这样做，但是在移动闪存上不是一种选择，在我们的用例中，使用代理来使请求来源相同并不是一种选择。所以，我对Andriod，Iphone，IPAD浏览器对CORS的支持特别感兴趣。
回答 3
Stack Overflow用户
发布于 2011-08-21 19:15:07
测试结果：坏消息，它似乎只适用于Chrome。所有其他浏览器(包括Android )都会出现如下错误：
Failed: DOM Exception: SECURITY_ERR (18)移动设备I测试了安卓(三星星系内核版本2.6.32.9)，Iphone和IPAD V1，这三个测试都失败了。
您可以使用以下网址：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>Stack Overflow用户
发布于 2012-12-28 19:33:08
我刚刚在运行iPhone 6的iOS 6和Chrome上测试了这一点，您的测试页面通过了测试。我会把这作为一个评论，但我没有选择发表评论，你的回答。
Stack Overflow用户
发布于 2013-01-08 13:39:18
您可以使用php在没有CROS的情况下获得所需的所有内容，下面的示例如下所示：
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function a(x){
alert(x);
var img = new Image();
img.onload = function()
{
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.fillStyle = "#ffffff";
context.fillRect(0,0,img.width,img.height);
context.drawImage(img, 0, 0);
var data = canvas.toDataURL('image/jpeg' , 0.8);
document.write('<img src="'+data+'" />');
};img.src = x;
}
</script>
<?php
$im = imagecreatefromjpeg('http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg');
ob_start();
imagejpeg($im,NULL,100);
$outputBuffer = ob_get_clean();
$base64 = base64_encode($outputBuffer);
$x= 'data:image/jpeg;base64,'.$base64;
echo "<script>a('".$x."')</script>";
?>https://stackoverflow.com/questions/7129178
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号