Javascript

'Hindi makakuha ng data ng imahe mula sa canvas dahil ang canvas ay nabahiran ng cross-origin data'

Unable Get Image Data From Canvas Because Canvas Has Been Tainted Cross Origin Data



Una, ang paglalarawan ng problema:

Patakbuhin ang script ng javascript sa browser na sumusuporta sa html5. Pangunahin ang script upang manipulahin ang label na canvas sa webpage. Ang pagpapatakbo ng error ay,getImageData (img, ……),



Ang mensahe ng error sa ilalim ng chrome ay: 'Hindi makakuha ng data ng imahe mula sa canvas dahil ang canvas ay nabahiran ng cross-origin data',



Ang mensahe ng error sa ilalim ng fireFox ay: 'Code ng error sa seguridad: '1000'



Ang key code ay ang mga sumusunod:

imahe 
init:function(){ var img=new Image()  img.src='http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0' var ctx=this.context3D img.onload=function(){ ctx.drawImage(img,0,0) var imgData=ctx.getImageData(0,0,img.width,img.height) //Error line ctx.putImageData(imgData,50,50) } },
imahe

Pangalawa, paggalugad at sagot

Nang maghanap ako sa Internet, nalaman kong karamihan sa kanila ang nagsabi nitoAng pagpapaandar ng getImageData ay dapat na patakbuhin sa panig ng server. Kung walang kapaligiran sa server (halimbawa, isang lokal na pahina lamang ng html, magpatakbo ng isang lokal na imahe), uulat ito'Hindi makakuha ng data ng imahe mula sa canvas dahil ang canvas ay nabahiran ng cross-origin data'error.



Ngunit malinaw naman, ang aking sample na programa sa itaas ay tumatakbo sa isang tomcat server at iniulat pa rin ang error na ito. Ano ang problema?

Nang maglaon nakita ko ang sanhi ng problema sa stackoverflow.(Ang website ng stackoverflow ay lubos na inirerekomenda. Ito ay isang kilalang teknikal na Q&A website na sumasaklaw sa isang malawak na hanay ng mga paksa kabilang ang C, C ++, Java, web, at Linux. Karamihan sa mga mag-aaral ng Tsino ay hindi nais na basahin ang mga web page ng Ingles, ngunit sa katunayan, maraming mga problema sa mga web page ng Intsik. Mayroong maraming mga paraan upang makahanap ng mga sagot sa maraming mahusay na mga website sa Ingles, tulad ng stackoverflow. )

Narito ang isang sagot sa katanungang ito sa stackoverflow:

Isinalin bilang sumusunod: Upang maiwasan ang spoofing, susubaybayan ng browser ang data ng imahe. Kapag naglagay ka ng isa'Iba sa domain ng canvas'Kapag ang imahe ay nakalagay sa canvas, ang canvas ay nagiging 'madungis' (kontaminado, marumi) at hindi ka hinayaan ng browser na manipulahin ang anumang mga pixel ng canvas. Napaka kapaki-pakinabang para sa pag-block ng maraming uri ng pag-atake ng XSS / CSRF (dalawang tipikal na pag-atake ng cross-site).

Ang pangunahing punto sa mga salitang nasa itaas ay ang teksto na minarkahan ng pula ay 'naiiba mula sa domain ng canvas', kaya't sinuri ko ang address ng aking kahilingan sa imahe at ang kahilingan sa pahina, at nalaman na ang kanilang mga patlang ay talagang magkakaiba.

Image request address: http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0  Enter the page in the browser to stop at: http://summer1:8080/hadoopWebGis2/jsp/map3D.html

(Bagaman ang pagmamapa sa file ng mga host ay: 10.0.5.199: tag-init1, makatuwirang sabihin na awtomatikong babaguhin ng browser ang dalawa, ngunit hindi ko alam kung bakit, ngunit kinikilala ito bilang isang iba't ibang domain.)

Matapos ang pagbabago ay ang mga sumusunod, malulutas ang problema：

imahe 
Image request address: http://summer1:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0 Enter the page in the browser to stop at: http://summer1:8080/hadoopWebGis2/jsp/map3D.html  -----------------or------------------------- Image request address: http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0  Enter the page in the browser to stop at: http://10.0.5.199:8080/hadoopWebGis2/jsp/map3D.html
imahe

---- ---- ---- ---

Off-topic: Bakit walang kapaligiran sa server (halimbawa, isang lokal na pahina lamang ng html, na nagpapatakbo ng isang lokal na imahe), mag-uulat ito'Hindi makakuha ng data ng imahe mula sa canvas dahil ang canvas ay nabahiran ng cross-origin data'Error?

Personal na pag-unawa: ang domain ng lokal na web page ayfile: //, Tulad ng: file: ///home/summer/Desktop/test.html Ang lokal na larawan ay tiyak na hindi nagsisimula sa file: //. Halimbawa, ang isang larawan sa kapaligiran sa Linux ay: /home/summer/Desktop/test.png, at isang larawan sa kapaligiran ng windows ay: c: tmp test .png.

Orihinal mula sa: http://www.cnblogs.com/jdksummer/articles/2565998.html

Muling nai-print sa: https://www.cnblogs.com/9546-blog/p/3392897.html