Question

我差不多完成了一个基于Javascript / HTML5的游戏，我一直在测试它，使用Chrome在我的本地文件系统上打开HTML页面（我没有在任何地方上传任何内容）。我正在使用Chrome的file://协议来执行此操作。但是我遇到了一个问题......在游戏开始时，我会在移动到菜单屏幕之前显示图像几秒钟。我通过抓住画布的像素数据暂停游戏，显示它，然后在整个事物上画一个半透明的矩形，用十字准线作为自定义指针。但是，Chrome给我带来了DOM安全异常18："Unable to get image data from canvas because the canvas has been tainted by cross-origin data."

的麻烦

所以我在互联网上做了一些研究，事实证明这是因为Chrome看到图像是从本地文件系统中获取的，并将此视为安全错误。使用this question作为参考，我尝试对跨源资源共享进行一些研究，但很快就迷路了。我认为使用http://和localhost简单地打开测试HTML文件会更容易，就像回答者提出的问题一样。但我也不知道如何做到这一点。

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

Answer 1

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

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

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

然后CORS在Chrome＆amp; Mozilla的。但是，IE仍然不能成为CORS友好的 - 来IE吧:(

以下是如何从dropbox（Chrome＆amp; Mozilla，而不是IE）加载没有CORS问题的图像。

“秘密”是在设置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";

这是代码和小提琴：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>

Answer 2

使用本地文件系统进行开发通常不是一个好主意，正是因为您发现了这个原因。要使用localhost选项，您需要在PC上安装Web服务器。谷歌提供WAMP软件包（Windows，Apache，MysQL，PHP），它可以为您提供所需的一切。

不幸的是，如果你有一台网络服务器，CORS只适合你！

[edit]显然，你可以从wampserver.com获得一个WAMP服务器！

DOM安全例外18：受污染的画布

2 个答案: