wake-up-neo.com

Ursprungsübergreifende Daten im HTML5-Canvas

Ich lade ein Bild in js und zeichne es in eine Leinwand. Nach dem Zeichnen rufe ich imageData von der Leinwand ab:

var img = new Image();
img.onload = function() {
    canvas.drawImage(img, 0, 0);
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails
}
img.src = 'picture.jpeg';

Dies funktioniert sowohl in Safari als auch in Firefox einwandfrei, schlägt jedoch in Chrome mit der folgenden Meldung fehl:

Bilddaten können nicht von der Leinwand abgerufen werden, da die Leinwand durch Ursprungsdaten verfälscht wurde.

Die Javascript-Datei und das Bild befinden sich im selben Verzeichnis, daher verstehe ich das Verhalten von Chorme nicht.

27
Samuel Müller

Um CORS ( Cross-Origin Resource Sharing ) für Ihre Bilder zu aktivieren, übergeben Sie den HTTP-Header mit der Bildantwort:

Access-Control-Allow-Origin: *

Der Ursprung wird anhand der Domäne und des Protokolls der Webseite (z. B. http und https ist nicht identisch) festgelegt und nicht anhand des Speicherorts des Skripts.

Wenn Sie lokal mit file: // ausführen, wird dies normalerweise immer als domänenübergreifendes Problem betrachtet. also ist es besser über zu gehen

http://localhost/
24
Ben Adams

Um das domänenübergreifende Problem mit file: // zu lösen, können Sie Chrome mit dem Parameter starten

--allow-file-access-from-files
9
Markus Madeja
var img = new Image();
img.onload = function() {
    canvas.drawImage(img, 0, 0);
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail
}
img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example
img.src = 'picture.jpeg';

Hoffe das hilft

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  originalImageData = ctx.canvas.toDataURL();
}
img.src = 'picture.jpeg';

hoffe das hilft.

2
code.rider

Wenn der Serverantwortheader Access-Control-Allow-Origin: * enthält, können Sie dies auf der Clientseite korrigieren: Fügen Sie dem Bild oder Video ein Attribut hinzu.

<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>

Ansonsten müssen Sie einen serverseitigen Proxy verwenden.

0
Jeff Tian