Wie zu beheben getImageData () - Fehler-Die Leinwand wurde dieses Bild durch cross-origin-Daten?
Mein code funktioniert sehr gut auf meinem localhost, aber es ist nicht auf der Baustelle tätig.
Bekam ich diese Fehlermeldung von der Konsole, für diese Linie .getImageData(x,y,1,1).data
:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Teil von meinem code:
jQuery.Event.prototype.rgb=function(){
var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().top);
if (this.target.nodeName!=="CANVAS")return null;
return this.target.getContext('2d').getImageData(x,y,1,1).data;
}
Hinweis: meine Bild-url (src) ist von einer subdomain url
Ich bin immer diese Fehlermeldung, selbst wenn der img.src ist eine lokale relative url: "img/foo.png" - also, was ist cross-origin über diese?
InformationsquelleAutor Erfan Safarpoor | 2014-02-28
Du musst angemeldet sein, um einen Kommentar abzugeben.
Als andere haben gesagt, Sie sind "Beschränkungen" der Leinwand durch das laden aus einer Kreuzung Ursprünge domain.
https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
Jedoch, Sie können dies verhindern, indem Sie einfach die Einstellung:
Funktioniert dies nur, wenn der remote-server setzt die folgenden header entsprechend:
Den Dropbox-file-chooser wenn Sie den "direct link" - option ist ein gutes Beispiel dafür. Ich benutze es auf oddprints.com hoover-up Bilder von der remote-dropbox-Bild-url, in meiner Leinwand, und dann übermitteln Sie die Bilddaten wieder in meinem server. Alle in javascript
arbeitete für mich, wenn ich crossorigin zuerst, dann legen Sie die Quell-und dann Zugriff auf die Daten onload
Was ist, wenn es eine lokale Datei, und Sie Ihre app nicht nutzen Sie das internet überhaupt? Wie ein android-webview-app und das Bild ist nur in den gleichen Ordner wie die html-Datei. Dies bedeutet nicht, es zu lösen.
InformationsquelleAutor matt burns
Fand ich, dass ich hatte, zu verwenden
.setAttribute('crossOrigin', '')
und musste einen Zeitstempel Anhängen an die URL-query-string zu vermeiden, eine 304 Antwort fehlt dieAccess-Control-Allow-Origin
header.Das gibt mir
Einfach mit
imgObj.setAttribute('crossOrigin', '')
gelöst es für mich - danke!img.crossOrigin = "Anonymous"
so gut funktioniert (wie erwähnt, hier). @SanfordStaab Browser behandeln lokale Dateien auf einer anderen domain, ansonsten website-Besitzer könnte, Lesen Sie Ihre lokalen Dateien. Sie fordern Bilder von der gleichen domain, oder der Header in der Antwort auf Ihre Anfrage brauchen, um dem browser mitzuteilen, dass es okay für code aus anderen Domänen zu Lesen, dass die Datei.InformationsquelleAutor Kirby
Werden Sie nicht in der Lage zu zeichnen, Bilder direkt von einem anderen server in eine Leinwand und verwenden Sie dann
getImageData
. Es ist eine Frage der Sicherheit und die Leinwand wird als "befleckt".Würde es die Arbeit für Sie zum speichern einer Kopie des Bildes, um Ihren server mit PHP und dann einfach laden Sie die neue Bild? Zum Beispiel könnten Sie senden die URL an das PHP-Skript und speichern Sie es auf Ihren server, dann schicken Sie den neuen Dateinamen ein, um Ihre javascript so:
Möchten, verwenden Sie die PHP-Skript mit einigen ajax javascript so:
Wenn Sie
getImageData
auf der Leinwand nach, dass, es wird funktionieren.Alternativ, wenn Sie nicht möchten, speichern Sie das ganze Bild, könnte passieren x & y-Koordinaten, um Ihre PHP-Skript und berechnen die pixel rgba-Wert auf die Seite. Ich denke, es gibt gute Bibliotheken für diese Art der Bildverarbeitung in PHP.
Wenn Sie möchten, verwenden Sie diesen Ansatz, lassen Sie mich wissen, wenn Sie Hilfe benötigen, um diese umzusetzen.
edit: guckt wies darauf hin, dass das php-Skript ausgesetzt ist, und erlaubt, das internet zu potenziell verwenden Sie es in böser Absicht. es gibt eine million Möglichkeiten, dies zu behandeln, sind eine der einfachsten, das eine Art von URL-Verschleierung... ich Schätze, sichere php-Praktiken verdient eine separate google ;P
das ist nicht sehr sicher, jemand könnte in böswilliger Absicht Flut Ihre server mit großen Dateien über das php-Skript, das wäre schlecht
Antwort verbessert mit einem einfachen Sicherheits-check
Dank dieser Methode ist es auch möglich, an einem Bild zu tesseract.js OCR-Modul ohne Verwendung von node.js (fügen Sie einfach den Aufruf von Tesseract.erkennen(img) img.onload () - Funktion.
InformationsquelleAutor jaya
Dein problem ist, dass Sie externes Bild laden, das heißt, von einer anderen Domäne. Dies bewirkt, dass eine security-Fehlermeldung, wenn Sie versuchen, Zugriff auf alle Daten Ihrer canvas-Kontext.
Sie könnte auch einen proxy verwenden, um das abrufen von Bild, dieser proxy wäre auf der gleichen Domäne wie die, die Sie mit Ihrem Leinwand auf.
dieses problem ist sehr schwer ...
Ich bin das hochladen ein neues Bild aus Meinem Rechner & versuchen Sie, laden Sie es im canvas & ich bin immer diese Fehlermeldung. Ich bin nicht mit jeder Art von server-image.
Ihr computer gesehen, die von dem server wo das script liegt (aber nicht ausgeführt), als eine externe Domäne, da das Bild kopiert, in den canvas-Bereich wird auf dem computer erstellt, auf denen das Skript ausgeführt wird.
InformationsquelleAutor axelduch
Sind Sie "tainting" der Leinwand durch das laden aus einer Kreuzung Ursprünge domain. Überprüfen Sie heraus dieses MDN-Artikel:
https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
Welchen browser Sie testen in? Und stellen Sie sicher, dass Sie Apache neu gestartet.
ich kann nicht den apache neu starten ... ich habe Anteil cpanel-Konto.
Kann nicht helfen, konfigurieren Sie den Apache-Server, sorry. Seine auch aus dem Anwendungsbereich dieser Frage. Posten Sie Ihre Probleme in Bezug auf die Apache-setup um eine neue Frage und die community wird Ihnen gerne helfen es.
InformationsquelleAutor srquinn
Sah ich das der Fehler auf
Chrome
während ich meine Prüfung code lokal. Ich wechselte zuFirefox
und ich bin nicht zu sehen, die Fehler nicht mehr. Vielleicht der Wechsel zu einem anderen browser ist eine schnelle Lösung.Wenn Sie die Lösung in der ersten Antwort, dann stellen Sie sicher, fügen
img.crossOrigin = "Anonymous";
nur, nachdem Sie erklären dieimg
variable (zB.var img = new Image();
).InformationsquelleAutor Safwan
Als matt burns sagt in seine Antwort, die Sie benötigen, um CORS auf dem server, wo das problem Bilder gehostet werden.
Wenn der server Apache, das getan werden kann indem Sie den folgenden Codeausschnitt (aus hier) entweder mit deiner VirtualHost-config oder ein
.htaccess
Datei:...wenn Sie es einem VirtualHost, werden Sie wahrscheinlich benötigen, um ein reload der Apache config (zB.
sudo service apache2 reload
wenn der Apache läuft auf einem Linux-server)InformationsquelleAutor Nick F
Bei der Arbeit auf lokalen server hinzufügen
Ich hatte ein ähnliches Problem bei der Arbeit an lokalen. Dir url ist der Pfad zu der lokalen Datei z.B. file:///Users/PeterP/Desktop/folder/index.html.
Bitte beachten Sie, dass ich auf einem MAC.
Hab ich Sie diese Runde durch die Installation von http-server weltweit. https://www.npmjs.com/package/http-server
Schritte:
npm install http-server -g
http-server ~/Desktop/folder/
PS: ich nehme an, Sie haben Knoten installiert werden, sonst werden Sie nicht sehr weit laufen npm-Befehle.
InformationsquelleAutor Anas
Ich das gleiche problem heute, und es zu lösen, indem der code folgt.
html-code:
js-code:
code wie oben, und es gibt keine cross-domain-problem.
Dieser Ansatz funktioniert, wenn ausgeführt auf einer lokalen html-Datei (kein server) wie file:///X:/htmlfile.html. Die meisten Menschen beenden Ihre Anweisungen mit ";". Was ist der Sinn von "var Daten = .." - Anweisung? Ich würde gerne eine ERKLÄRUNG, WARUM dies vermeidet die "cross-domain" - Fehler. Aber es funktioniert, danke.
double smart karry
Menschen am Ende Ihrer Aussagen mit ;" Mit Semikolon wird nicht empfohlen, da pro die standards. Semikolon fügen Sie einfach mehr arbeiten, hässlich zu sein, und der code funktioniert auch ohne Sie. Check github.com/standard/standard
developer.mozilla.org sagt "JavaScript Anwendungen bestehen aus Anweisungen mit einer entsprechenden syntax. Eine einzelne Anweisung kann mehrere Zeilen umfassen. Mehrere Anweisungen auftreten können, auf eine einzige Linie, wenn jede Anweisung wird durch ein Semikolon voneinander getrennt. Dies ist nicht ein Schlagwort, sondern eine Gruppe von Schlüsselwörtern." Also bin ich in die "immer" - Fraktion. Wusste ich gar nicht, es sei eine "nie" - Fraktion. Ich nehme an letzteres glauben auch, die Erde ist flach? (Nur ein Scherz -- danke)
InformationsquelleAutor Karry
Ich hatte das gleiche Problem, und bei mir funktionierte es, indem Sie einfach die Verkettung
https:${image.getAttribute('src')}
InformationsquelleAutor Livia Rett