it-swarm.com.de

So beheben Sie den Fehler getImageData () Die Leinwand wurde durch Ursprungsdaten verfälscht.

Mein Code funktioniert sehr gut auf meinem localhost, aber er funktioniert nicht auf der Site.

Ich habe diese Fehlermeldung von der Konsole erhalten, für diese Zeile .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-Origin data. 

teil meines Codes:

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) stammt von einer Unterdomänen-URL

98
Erfan Safarpoor

Wie andere schon gesagt haben, "faulen" Sie die Leinwand, indem Sie sie aus einer Cross-Origin-Domäne laden.

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Sie können dies jedoch verhindern, indem Sie einfach Folgendes einstellen:

img.crossOrigin = "Anonymous";

Dies funktioniert nur, wenn der Remote-Server den folgenden Header entsprechend setzt:

Access-Control-Allow-Origin "*"

Die Dropbox-Dateiauswahl bei Verwendung der Option "Direkter Link" ist ein gutes Beispiel dafür. Ich verwende es auf oddprints.com , um Bilder von der Remote-Dropbox-Image-URL in meinen Canvas zu laden und die Bilddaten dann wieder auf meinem Server einzureichen. Alles in Javascript :)

81
matt burns

Ich stellte fest, dass ich .setAttribute('crossOrigin', '') verwenden musste, und musste an die Abfragezeichenfolge der URL einen Zeitstempel anfügen, um zu vermeiden, dass die Antwort 304 den Access-Control-Allow-Origin-Header vermisst. 

Das gibt mir

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');
31
Kirby

Sie können keine Bilder direkt von einem anderen Server in eine Leinwand zeichnen und dann getImageData verwenden. Dies ist eine Sicherheitslücke und die Leinwand wird als "befleckt" betrachtet.

Würde es für Sie funktionieren, eine Kopie des Images mit PHP auf Ihrem Server zu speichern und dann einfach das neue Image zu laden? Sie können beispielsweise die URL an das Skript PHP senden, auf Ihrem Server speichern und dann den neuen Dateinamen wie folgt in Ihr Javascript zurückgeben:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];
  $img = file_get_contents($url);
  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

Sie würden das Skript PHP mit einem ajax-Javascript wie dem folgenden verwenden:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

Wenn Sie anschließend getImageData auf der Leinwand verwenden, funktioniert es einwandfrei. 

Wenn Sie nicht das gesamte Bild speichern möchten, können Sie alternativ X- und Y-Koordinaten an Ihr Skript PHP übergeben und den rgba-Wert des Pixels auf dieser Seite berechnen. Ich denke, es gibt gute Bibliotheken für diese Art der Bildverarbeitung in PHP.

Wenn Sie diesen Ansatz verwenden möchten, lassen Sie mich wissen, ob Sie Hilfe bei der Implementierung benötigen.

17
jaya

Ich habe diesen Fehler auf Chrome gesehen, während ich meinen Code lokal getestet habe. Ich habe zu Firefox gewechselt und sehe den Fehler nicht mehr. Möglicherweise ist das Wechseln zu einem anderen Browser eine schnelle Lösung.

Wenn Sie die in der ersten Antwort angegebene Lösung verwenden, stellen Sie sicher, dass Sie img.crossOrigin = "Anonymous"; hinzufügen, unmittelbar nachdem Sie die Variable img deklariert haben (z. B. var img = new Image();).

2
Safwan

Sie "färben" die Leinwand, indem Sie aus einer Ursprungsdomäne laden. Schauen Sie sich diesen MDN-Artikel an:

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

2
srquinn

Ihr Problem ist, dass Sie ein externes Image laden, das heißt von einer anderen Domäne. Dies verursacht einen Sicherheitsfehler, wenn Sie versuchen, auf Daten Ihres Canvas-Kontexts zuzugreifen.

2
axelduch

Wie Matt Burns in seine Antwort sagt, müssen Sie möglicherweise CORS auf dem Server aktivieren, auf dem die Problemimages gehostet werden.

Wenn der Server Apache ist, kann dies durch Hinzufügen des folgenden Ausschnitts (von hier ) zu Ihrer VirtualHost-Konfiguration oder einer .htaccess-Datei erfolgen:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

... wenn Sie es zu einem VirtualHost hinzufügen, müssen Sie wahrscheinlich auch die Konfiguration von Apache neu laden (z. B. Sudo service Apache2 reload, wenn Apache auf einem Linux-Server ausgeführt wird).

0
Nick F

Ich hatte das gleiche Problem, und für mich funktionierte es, indem ich einfach https:${image.getAttribute('src')} verkettete.

0
Livia Rett

Fügen Sie bei der lokalen Arbeit einen Server hinzu

Ich hatte ein ähnliches Problem bei der Arbeit an lokalen. Ihre URL wird der Pfad zur lokalen Datei sein, z. file: ///Users/PeterP/Desktop/folder/index.html.

Bitte beachten Sie, dass ich auf einem MAC bin.

Ich habe dies durch die globale Installation des http-Servers umgangen. https://www.npmjs.com/package/http-server

Schritte:

  1. Globale Installation: npm install http-server -g
  2. Server ausführen: http-server ~/Desktop/folder/

PS: Ich nehme an, Sie haben Knoten installiert, sonst werden Sie nicht sehr lange npm-Befehle ausführen.

0
Anas