„Nelze získat obrazová data z plátna, protože plátno bylo poznamenáno údaji o křížovém původu“

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



Nejprve popis problému:

Spusťte skript javascript v prohlížeči, který podporuje html5. Skript slouží hlavně k manipulaci s plátnem štítku na webové stránce. Chybová operace je,getImageData (obrázek, ……),



Chybová zpráva pod chromem je: 'Nelze získat obrazová data z plátna, protože plátno bylo poznamenáno údaji o křížovém původu',



Chybová zpráva pod fireFox je: 'Kód chyby zabezpečení: 1000''



Klíčový kód je následující:

obraz
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) } },
obraz

Zadruhé, průzkum a odpověď

Když jsem hledal na internetu, zjistil jsem, že to většina řeklaFunkce getImageData musí být spuštěna na straně serveru. Pokud není k dispozici žádné serverové prostředí (například pouze místní stránka html, obsluhujte místní obrázek), bude se hlásit„Nelze získat obrazová data z plátna, protože plátno bylo poznamenáno údaji o křížovém původu'chyba.



Ale samozřejmě, můj ukázkový program výše běží na serveru Tomcat a stále hlásil tuto chybu. V čem je tedy problém?

Později jsem našel příčinu problému na StackOverflow.Důrazně doporučujeme web stackoverflow. Toto je velmi známý technický web otázek a odpovědí pokrývající širokou škálu témat, včetně C, C ++, Javy, webu a Linuxu. Většina čínských studentů nerada čte anglické webové stránky, ale ve skutečnosti existuje mnoho problémů s čínskými webovými stránkami. Existuje mnoho způsobů, jak najít odpovědi na mnoha vynikajících anglických webech, například stackoverflow. )

Tady je odpověď na tuto otázku na StackOverflow:

Přeloženo následovně: Aby se zabránilo spoofingu, prohlížeč bude sledovat obrazová data. Když jeden dáte'Liší se od domény plátna'Když je obrázek umístěn na plátno, plátno bude „zkažené“ (znečištěné, špinavé) a prohlížeč vám nedovolí manipulovat s žádnými pixely plátna. To je velmi užitečné pro blokování více typů útoků XSS / CSRF (dva typické útoky napříč weby).

Klíčovým bodem ve výše uvedených slovech je to, že text označený červeně je „odlišný od domény plátna“, proto jsem zkontroloval adresu mého požadavku na obrázek a požadavku na stránku a zjistil, že jejich pole jsou opravdu odlišná.

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

(Ačkoli mapování v souboru hostitelů je: 10.0.5.199: léto1, lze rozumně říci, že prohlížeč tyto dva soubory automaticky převede, ale nevím proč, ale je rozpoznáno jako jiná doména.)

Po provedení následujících úprav je problém vyřešen

obraz
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
obraz

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

Off-topic: Proč neexistuje žádné serverové prostředí (například jen lokální html stránka, provozující lokální image), bude to reportovat„Nelze získat obrazová data z plátna, protože plátno bylo poznamenáno údaji o křížovém původu'Chyba?

Osobní porozumění: doménou místní webové stránky jesoubor://,Jako: file: ///home/summer/Desktop/test.html Místní obrázek rozhodně nezačíná souborem: //. Například obrázek v prostředí Linux je: /home/summer/Desktop/test.png a obrázek v prostředí Windows je: c: tmp test .png.

Originál od: http://www.cnblogs.com/jdksummer/articles/2565998.html

Přetištěno na: https://www.cnblogs.com/9546-blog/p/3392897.html