Fatal编程技术网
  • html/
  • Html 浏览器画布CORS支持跨域加载的图像处理

Html 浏览器画布CORS支持跨域加载的图像处理

html canvas security cors

Html 浏览器画布CORS支持跨域加载的图像处理,html,canvas,cross-domain,security,cors,Html,Canvas,Cross Domain,Security,Cors,问题：哪些浏览器版本支持画布中使用的跨域图像的CORS（跨源资源共享）标题？ CORS可以应用于跨域XMLHttpRequests和映像请求。这个问题是关于图像请求的，我的正常浏览器版本兼容性在这个问题上是不清楚的，谷歌搜索没有产生好的结果 我确实发现最近的一个chrome开发博客暗示CORS支持在现代浏览器中广泛传播，但可能因为WebGL安全问题而中断。 有关CORS的更多详细信息： <!DOCTYPE html> <html> <head> <

问题：哪些浏览器版本支持画布中使用的跨域图像的CORS（跨源资源共享）标题？

CORS可以应用于跨域XMLHttpRequests和映像请求。这个问题是关于图像请求的，我的正常浏览器版本兼容性在这个问题上是不清楚的，谷歌搜索没有产生好的结果

我确实发现最近的一个chrome开发博客暗示CORS支持在现代浏览器中广泛传播，但可能因为WebGL安全问题而中断。

有关CORS的更多详细信息：

  <!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>
我们正在考虑将canvas&CORS与W3C工作草案中描述的跨域映像请求一起使用的可行性。html画布使用CORS允许跨域资源使用，其方式类似于flash使用crossdomain.xml的方式。基本上，我们希望读取/编辑图像数据像素，而不希望使用同一来源的代理服务器

通常，如果图像跨域加载并与html画布一起使用，则使用canvas.toDataURL（）等函数访问像素会引发安全错误。但是，如果提供映像的服务器添加了这样的头，则应该允许跨域使用

access-control-allow-origin: *
我们最关心的浏览器：

  <!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>
我们计划使用flash解决IE缺乏画布支持的问题，因此对于存在CORS问题的桌面浏览器，我们也可以这样做，但在移动flash上不是一个选项，在我们的用例中，使用代理使请求来源相同也不是一个选项。所以，我对Andriod、Iphone、IPAD浏览器对CORS的支持特别感兴趣

测试结果：坏消息是，它似乎只在Chrome中起作用。 所有其他浏览器（包括Android Mobile）都会出现如下错误：

Failed: DOM Exception: SECURITY_ERR (18)
移动设备我测试了Android（三星galaxy内核版本2.6.32.9）、Iphone和IPAD V1，但三个版本都失败了

您可以使用以下URL测试自己的移动设备：

测试脚本：

  <!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支持
函数初始化（）{
//如果没有画布支持，将在此失败
试一试{
var can=document.getElementById（'mycanvas'）；
var ctx=can.getContext（'2d'）；
var img=新图像（）；
img.crossOrigin=''；
//域需要不同于html页面域才能测试跨源安全性
img.src=http://lobbydata.com/Content/images/bg_price2.gif';
}捕获（ex）{
document.getElementById（“结果”）.innerHTML=“失败：”+ex.Message+”；
}
//如果出现安全错误，将在此失败
img.onload=函数（）{
试一试{
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
对于（变量i=0；iargb.push（（pix[i+3]我刚刚在运行iOS 6的iPhone上用Safari和Chrome对其进行了测试，您的测试页面通过了测试。我本来会将其作为评论发布，但我无权在您的答案上发表评论。
您可以使用php获得您想要的一切，而无需CRO，工作示例如下：


<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>";
?>




函数a（x）{
警报（x）；
var img=新图像（）；
img.onload=函数（）
{
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）；
drawImage（img，0,0）；
var data=canvas.toDataURL（'image/jpeg'，0.8）；
文件。写（“”）；
}；img.src=x；
}

我正要发布一个关于这个的问题。很高兴我不是唯一一个疯狂认为这应该有效的人。这在FF17中现在有效，但在IE10中仍然不起作用。我想我必须继续使用代理来处理我的请求。1.5年后更新：在Windows上，我刚刚测试了IE9（失败）、Safari 5.0.5（失败）、Firefox（通过）和Chrome（通过）它不能在IOS7上运行SVG图像！4年后更新：在WindowsIE11（pass）、Edge（pass）、Firefox（pass）、Chrome（pass）上.好消息！我的帖子已经有一年半的历史了，所以我很高兴看到浏览器有了进步。我在Windows 8-IE 10中进行了测试，但仍然失败。在Mac OSX 10.7.5-Safari 6.0.2中进行了测试，结果通过了。这并不是一个真正的“答案”。可能应该只是一个评论，以及之前的答案和类似的评论。@pseudosavant如果你读了我的帖子，你会的我已经看到我说我不能评论。也许你已经忘记了，因为你有很多的声誉，但你必须有50个代表在任何地方发表评论。在我的帖子时，我没有50个代表。但是，嘿，谢谢你让我失去2分。这看起来像一个代理服务。如果你控制了承载页面的域，可以添加这个script，它应该可以工作。但是，如果您不这样做，那么您将无法应对CORS的限制。对于托管可嵌入小部件或提供api服务的站点来说，这尤其令人痛苦，因为这意味着想要使用画布触摸图像的api的每个用户都必须设置自己的特定于域的代理，如果他们想要不能正确实现CORS的常用浏览器。因为这个问题在许多浏览器中都很常见，所以不能忽略。主要的是要对im进行base64解码