我几乎完成了一个基于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."
因此，我在Internet上进行了一些研究，事实证明这是因为Chrome认为该图像是从本地文件系统中获取的，并将其视为安全错误。使用this question作为参考，我尝试对跨域资源共享进行一些研究，但很快就迷路了。我认为像问题回答者建议的那样，简单地使用http://和localhost打开测试HTML文件会容易得多。但是我也不知道该怎么做。
我真的很想使用Chrome继续测试我的游戏（事实证明，通过Ctrl-Shift-I访问的开发人员工具非常有价值），所以我认为有以下三种解决方案：弄清CORS是什么以及如何使用它，请学习如何使用http://打开本地文件，或以某种方式将我的图像数据硬编码为JavaScript脚本文件中的变量（例如C语言中的XPM文件）。我不知道该如何做前两个，而我正努力避免第三个。
最佳答案
是的，可能是时候下载本地Web服务器或注册托管服务器了。
但是，如果您想在没有服务器的情况下继续测试，则可以注册一个免费的dropbox.com帐户并在其中托管图像。
Dropbox允许使用CORS友好的crossOrigin =“ anonymous”访问图像。
那么CORS在Chrome＆Mozilla上就没有问题。但是，IE仍然无法与CORS友好-出现在IE :(
以下是从保管箱（Chrome和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>
关于javascript - DOM安全异常18:受污染的 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17139858/