Ursprungsübergreifende Daten in HTML5-Canvas

Ich lade ein Bild in js und zeichne es in eine Leinwand. Nach dem Ziehen abrufen i imagedata von der Leinwand:Ursprungsübergreifende Daten in HTML5-Canvas

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';

Das funktioniert perfekt sowohl in Safari und Firefox, aber nicht in Chrome mit der folgenden Meldung:

Unable Bilddaten von der Leinwand zu bekommen, weil die Die Leinwand wurde durch Ursprungsdaten beschädigt.

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

Quelle

2012-04-02 Samuel Müller

möglich duplicate von [context.getImageData() auf localhost?] (Http://stackoverflow.com/questions/8688600/context-getimagedata-on-localhost) – mplungjan

Wenn dies nicht von einem Webserver ist, erhalten Sie dieses Problem es scheint – mplungjan

Sie haben Recht, das hat das Problem gelöst. Vielen Dank! –

Damit CORS (Cross-Origin Resource Sharing) für Ihre Bilder den HTTP-Header mit dem Bild Antwort übergeben: ist

Access-Control-Allow-Origin: *

Der Ursprung von Domain und Protokoll bestimmt (zB http und https nicht gleich sind) der Webseite und nicht der Ort des Skripts.

Wenn Sie lokal mit file: // arbeiten, wird dies im Allgemeinen immer als domänenübergreifendes Problem angesehen. so ist es besser zu gehen über

http://localhost/

Quelle

2012-07-01 21:42:43

ist richtig, mit file: // wird als ein Cross-Domain-Problem gesehen. Der gleiche Code mit Datei: // zeigt diesen Fehler und http: // funktioniert einwandfrei. Danke. – pocjoc

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';

this helps

Quelle

2013-02-21 19:46:39

'http://profile.ak.fbcdn.net/crossdomain.xml' ist kein gültiger Wert für das [crossorigin attribute] (http://www.w3.org/TR/html5/infrastructure.html#cors-settings-attribute) und 'crossdomain.xml' Dateien werden von Adobe Flash, nicht CORS. – Quentin

Um das Cross-Domain-Problem mit Datei zu lösen: //, Sie Chrom mit dem Parameter

--allow-file-access-from-files

Quelle

2013-08-09 12:56:05

Danke Markus! Diese Lösung funktioniert für mich viel schneller. Um es ein wenig zu erklären, müssen Sie zuerst chrome verlassen und wenn Sie auf Mac laufen, öffnen Sie das Terminal und führen Sie '' 'open/Applications/Google \ Chrome.app --args --allow-file-access-from- Dateien '' 'Befehl – yeelan

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';

beginnen

hoffe das hilft.

Quelle

2016-10-07 11:42:50

Wenn die Header der Serverantwort enthalten, können Sie sie vom Client aus beheben: Fügen Sie dem Bild oder Video ein Attribut hinzu.

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

Andernfalls müssen Sie Server-Seite-Proxy verwenden.

Quelle

2017-07-21 04:03:57

Ursprungsübergreifende Daten in HTML5-Canvas

Antwort

Verwandte Themen