Ich möchte meine Leinwand in einem Bild speichern. Ich habe diese Funktion:
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
Es gibt mir Fehler:
Nicht erfasster Sicherheitsfehler: Fehler beim Ausführen von 'toDataURL' auf 'HTMLCanvasElement': Beschmutzte Leinwände können möglicherweise nicht exportiert werden.
Was soll ich machen?
javascript
html5-canvas
user3465096
quelle
quelle
Antworten:
Aus Sicherheitsgründen wird Ihr lokales Laufwerk als "andere Domäne" deklariert und beschädigt die Zeichenfläche.
(Das liegt daran, dass sich Ihre vertraulichsten Informationen wahrscheinlich auf Ihrem lokalen Laufwerk befinden!).
Versuchen Sie beim Testen die folgenden Problemumgehungen:
Legen Sie alle seitenbezogenen Dateien (.html, .jpg, .js, .css usw.) auf Ihrem Desktop ab (nicht in Unterordnern).
Veröffentlichen Sie Ihre Bilder auf einer Website, die die domänenübergreifende Freigabe unterstützt (z. B. dropbox.com). Stellen Sie sicher, dass Sie Ihre Bilder im öffentlichen Ordner der Dropbox ablegen und beim Herunterladen des Bildes auch das Cross-Origin-Flag setzen (var img = new Image (); img.crossOrigin = "anonym" ...)
Installieren Sie einen Webserver auf Ihrem Entwicklungscomputer (IIS- und PHP-Webserver verfügen beide über kostenlose Editionen, die auf einem lokalen Computer problemlos funktionieren).
quelle
Setzen Sie im img-Tag crossorigin auf Anonymous.
quelle
Wenn jemand meine Antwort sieht, sind Sie vielleicht in diesem Zustand:
1. Der Versuch, mit Openlayern einen Karten-Screenshot auf Leinwand zu erstellen (Version> = 3)
2. Und das Beispiel des Exportierens einer Karte
angezeigt 3. Mit ol.source.XYZ den Karten-Layer rendern
Bingo!
Verwenden Sie ol.source.XYZ.crossOrigin = 'Anonymous' , um Ihre Verwirrung zu lösen. Oder wie folgt Code:
quelle
Wenn Sie die
ctx.drawImage()
Funktion verwenden, können Sie Folgendes tun:Und in Ihrem Rückruf können Sie es jetzt verwenden
ctx.drawImage
und exportieren mittoDataURL
quelle
Tainted canvases may not be exported.
Fehlermeldung.In meinem Fall habe ich aus einem Video auf ein Canvas-Tag gezeichnet. Um den fehlerhaften Canvas-Fehler zu beheben, musste ich zwei Dinge tun:
quelle
Scheint, als würden Sie ein Bild von einer URL verwenden, für die der korrekte Access-Control-Allow-Origin-Header und damit das Problem nicht festgelegt wurden. Sie können dieses Bild von Ihrem Server abrufen und von Ihrem Server abrufen, um CORS-Probleme zu vermeiden.
quelle
Ich habe das Problem mit der
useCORS: true
Option gelöstquelle
Überprüfen Sie [CORS-fähiges Bild] [1] von MDN. Grundsätzlich müssen Sie einen Server haben, auf dem Images mit dem entsprechenden Access-Control-Allow-Origin-Header gehostet werden.
Sie können diese Bilder im DOM-Speicher speichern, als ob sie von Ihrer Domain bereitgestellt würden. Andernfalls treten Sicherheitsprobleme auf.
quelle
Nur als Antwort auf die Antwort von @ markE - wenn Sie einen lokalen Server erstellen möchten. Dieser Fehler wird auf einem lokalen Server nicht angezeigt.
Wenn Sie PHP auf Ihrem Computer installiert haben:
php -S localhost:3000
← Beachten Sie das Großbuchstaben 'S'.oder
Wenn Sie Node.js auf Ihrem Computer installiert haben:
npm init -y
npm install live-server -g
odersudo npm install live-server -g
auf einem Maclive-server
und es sollte automatisch ein neuer Tab im Browser mit geöffneter Website geöffnet werden.Hinweis: Denken Sie daran, eine index.html-Datei im Stammverzeichnis Ihres Ordners zu haben, da sonst Probleme auftreten können.
quelle
Ich habe diesen Fehler auch behoben, indem ich
useCORS : true,
meinen Code wie - hinzugefügt habe.quelle