我?guī)缀跬瓿闪艘粋€(gè)基于Javascript / HTML5的游戲,并且已經(jīng)通過(guò)使用Chrome打開(kāi)本地文件系統(tǒng)上的HTML頁(yè)面進(jìn)行了測(cè)試(我沒(méi)有在任何地方上傳任何內(nèi)容).我正在使用Chrome的file：//協(xié)議來(lái)執(zhí)行此操作.但是我遇到了問(wèn)題…在游戲開(kāi)始時(shí),我將圖像顯示了幾秒鐘,然后才進(jìn)入菜單屏幕.我通過(guò)抓取畫(huà)布的像素?cái)?shù)據(jù)來(lái)暫停游戲,顯示該數(shù)據(jù),然后在整個(gè)對(duì)象上繪制一個(gè)半透明的矩形,并以十字準(zhǔn)線(xiàn)作為自定義指針.但是,Chrome給我?guī)?lái)了有關(guān)DOM安全異常18的麻煩：“無(wú)法從畫(huà)布獲取圖像數(shù)據(jù),因?yàn)楫?huà)布已被跨域數(shù)據(jù)污染.”
因此,我在Internet上進(jìn)行了一些研究,結(jié)果發(fā)現(xiàn)這是因?yàn)镃hrome認(rèn)為該圖像是從本地文件系統(tǒng)中獲取的,并將其視為安全錯(cuò)誤.使用this question作為參考,我嘗試對(duì)跨域資源共享進(jìn)行一些研究,但很快就迷路了.我認(rèn)為像問(wèn)題回答者建議的那樣,使用http：//和localhost簡(jiǎn)單地打開(kāi)測(cè)試HTML文件會(huì)容易得多.但是我也不知道該怎么做.
我真的很想使用Chrome繼續(xù)測(cè)試我的游戲(通過(guò)Ctrl-Shift訪(fǎng)問(wèn)的開(kāi)發(fā)人員工具非常有用),因此我想出了三種解決方案：找出CORS是什么以及如何使用它,了解如何使用http：//打開(kāi)本地文件,或以某種方式將我的圖像數(shù)據(jù)硬編碼為JavaScript腳本文件中的變量(例如C語(yǔ)言中的XPM文件).我不知道該如何做前兩個(gè),而我正努力避免第三個(gè).
解決方法:
是的,可能是時(shí)候下載本地Web服務(wù)器或注冊(cè)托管服務(wù)器了.
但是,如果您想在沒(méi)有服務(wù)器的情況下繼續(xù)進(jìn)行測(cè)試,則可以注冊(cè)一個(gè)免費(fèi)的dropbox.com帳戶(hù)并在其中托管圖像.
Dropbox允許使用CORS友好的crossOrigin =“ anonymous”訪(fǎng)問(wèn)圖像.
那么CORS在Chrome& Mozilla的.但是,IE仍然無(wú)法與CORS友好-出現(xiàn)在IE ??
這是從Dropbox(Chrome& Mozilla,不是IE)加載圖像而不會(huì)出現(xiàn)CORS問(wèn)題的方法.
“秘密”是在設(shè)置image.src之前設(shè)置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>聯(lián)系客服
