|
我几乎完成了一个基于Javascript / HTML5的游戏,并且已经通过使用Chrome打开本地文件系统上的HTML页面进行了测试(我没有在任何地方上传任何内容).我正在使用Chrome的file：//协议来执行此操作.但是我遇到了问题…在游戏开始时,我将图像显示了几秒钟,然后才进入菜单屏幕.我通过抓取画布的像素数据来暂停游戏,显示该数据,然后在整个对象上绘制一个半透明的矩形,并以十字准线作为自定义指针.但是,Chrome给我带来了有关DOM安全异常18的麻烦：“无法从画布获取图像数据,因为画布已被跨域数据污染.”
因此,我在Internet上进行了一些研究,结果发现这是因为Chrome认为该图像是从本地文件系统中获取的,并将其视为安全错误.使用this question作为参考,我尝试对跨域资源共享进行一些研究,但很快就迷路了.我认为像问题回答者建议的那样,使用http：//和localhost简单地打开测试HTML文件会容易得多.但是我也不知道该怎么做.
我真的很想使用Chrome继续测试我的游戏(通过Ctrl-Shift访问的开发人员工具非常有用),因此我想出了三种解决方案：找出CORS是什么以及如何使用它,了解如何使用http：//打开本地文件,或以某种方式将我的图像数据硬编码为JavaScript脚本文件中的变量(例如C语言中的XPM文件).我不知道该如何做前两个,而我正努力避免第三个. 解决方法: 是的,可能是时候下载本地Web服务器或注册托管服务器了.
但是,如果您想在没有服务器的情况下继续进行测试,则可以注册一个免费的dropbox.com帐户并在其中托管图像.
Dropbox允许使用CORS友好的crossOrigin =“ anonymous”访问图像.
那么CORS在Chrome& Mozilla的.但是,IE仍然无法与CORS友好-出现在IE 🙁
这是从Dropbox(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./u/139992952/stackoverflow/colorhouse.png";
这是代码和小提琴：http:///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.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./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./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>
来源：https://www./content-1-498351.html
|
