个人中心
gpt4 book ai didi

javascript - DOM 安全异常 18 : Tainted Canvas

转载 作者：行者123 更新时间：2023-11-28 20:27:19 27 4
gpt4 key购买 nike

我即将完成一个基于 Javascript/HTML5 的游戏，并且我一直在通过使用 Chrome 打开本地文件系统上的 HTML 页面来测试它(我没有在任何地方上传任何内容)。我使用 Chrome 的 file:// 协议(protocol)来执行此操作。但我遇到了一个问题......在游戏开始时，我会在进入菜单屏幕之前显示图像几秒钟。我通过抓取 Canvas 的像素数据来暂停游戏，显示该数据，然后在整个事物上绘制一个半透明矩形，并使用十字准线作为自定义指针。但是，Chrome 给我带来了有关 DOM 安全异常 18 的麻烦:“无法从 Canvas 获取图像数据，因为 Canvas 已被跨源数据污染。”

所以我在互联网上做了一些研究，结果发现这是因为 Chrome 看到图像是从本地文件系统中抓取的，并将其视为安全错误。使用this question作为引用，我尝试对跨域资源共享进行一些研究，但很快就迷失了方向。我认为像问题回答者建议的那样使用 http:// 和 localhost 打开测试 HTML 文件会容易得多。但我也不知道该怎么做。

我真的很想使用 Chrome 来继续测试我的游戏(通过 Ctrl-Shift-I 访问的开发人员工具已被证明是无价的)，所以我认为有三种解决方案:弄清楚 CORS 是什么以及如何使用它，学习如何使用 http:// 打开本地文件，或者以某种方式将我的图像数据硬编码为 JavaScript 脚本文件中的变量(例如C) 中的 XPM 文件。我不知道如何做前两个，并且我正在努力避免第三个。

最佳答案

是的，可能是时候下载本地网络服务器或注册托管服务器了。

但如果您想在没有服务器的情况下继续测试，您可以注册免费的 dropbox.com 帐户并在那里托管您的图像。

Dropbox 允许使用 CORS 友好的 crossOrigin=”anonymous” 访问图像。

那么 CORS 在 Chrome 和 Mozilla 上就没有问题了。但是，IE 仍然对 CORS 不友好——加油 IE :(

以下是如何从 dropbox(Chrome 和 Mozilla，而不是 IE)加载没有 CORS 问题的图像。

“ secret ”是在设置 image.src 之前设置 image.crossOrigin=”anonymous”:

    var externalImage2=document.createElement("img");
    externalImage2.onload=function(){
        canvas.width=externalImage2.width;
        canvas.height=externalImage2.height;
        ctx.drawImage(externalImage2,0,0);
        // use getImageData to replace blue with yellow
        var imageData=recolorImage(externalImage2,0,0,255,255,255,0);
        // put the altered data back on the canvas  
        // this will FAIL on a CORS violation
        ctxAnonymous.putImageData(imageData,0,0);    
    }
    externalImage2.crossOrigin = "Anonymous";
    externalImage2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

这是代码和 fiddle :http://jsfiddle.net/m1erickson/YdzHT/ 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasCORS=document.getElementById("canvasCORS");
    var ctxCORS=canvasCORS.getContext("2d");
    var canvasAnonymous=document.getElementById("canvasAnonymous");
    var ctxAnonymous=canvasAnonymous.getContext("2d");

    // Using image WITHOUT crossOrigin=anonymous
    // Fails in all browsers
    var externalImage1=new Image();
    externalImage1.onload=function(){
        canvas.width=externalImage1.width;
        canvas.height=externalImage1.height;
        ctx.drawImage(externalImage1,0,0);
        // use getImageData to replace blue with yellow
        var imageData=recolorImage(externalImage1,0,0,255,255,255,0);
        // put the altered data back on the canvas  
        // this will FAIL on a CORS violation
        ctxCORS.putImageData(imageData,0,0);    
    }
    externalImage1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

    // Using image WITH crossOrigin=anonymous
    // Succeeds in Chrome+Mozilla, Still fails in IE
    var externalImage2=new Image();
    externalImage2.onload=function(){
        canvas.width=externalImage2.width;
        canvas.height=externalImage2.height;
        ctx.drawImage(externalImage2,0,0);
        // use getImageData to replace blue with yellow
        var imageData=recolorImage(externalImage2,0,0,255,255,255,0);
        // put the altered data back on the canvas  
        // this will FAIL on a CORS violation
        ctxAnonymous.putImageData(imageData,0,0);    
    }
    externalImage2.crossOrigin = "Anonymous";
    externalImage2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";


    function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){
        var c = document.createElement('canvas');
        var ctx=c.getContext("2d");
        var w = img.width;
        var h = img.height;
        c.width = w;
        c.height = h;

        // draw the image on the temporary canvas
        ctx.drawImage(img, 0, 0, w, h);

        // pull the entire image into an array of pixel data
        var imageData = ctx.getImageData(0, 0, w, h);

        // examine every pixel, 
        // change any old rgb to the new-rgb
        for (var i=0;i<imageData.data.length;i+=4)
          {
              // is this pixel the old rgb?
              if(imageData.data[i]==oldRed &&
                 imageData.data[i+1]==oldGreen &&
                 imageData.data[i+2]==oldBlue
              ){
                  // change to your new rgb
                  imageData.data[i]=newRed;
                  imageData.data[i+1]=newGreen;
                  imageData.data[i+2]=newBlue;
              }
          }
        return(imageData);
    }


}); // end $(function(){});
</script>

</head>

<body>
    <p>Original external image</p>
    <canvas id="canvas" width=140 height=140></canvas>
    <p>.getImageData with .crossOrigin='anonymous'
    <p>[Succeeds in Chrome+Mozilla, still fails in IE]</p>
    <canvas id="canvasAnonymous" width=140 height=140></canvas>
    <p>.getImageData without .crossOrigin='anonymous'
    <p>[Fails on all browsers]</p>
    <canvas id="canvasCORS" width=140 height=140></canvas>
</body>
</html>

关于javascript - DOM 安全异常 18 : Tainted Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17139858/

27 4 0
文章推荐： python - 在 PyQT4 中上下移动行
文章推荐： Javascript - 使函数异步
文章推荐： objective-c - UIWebView 不刷新
文章推荐： javascript - 将单词变成 jQuery 链接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com