Speichern Sie die HTML-5 canvas-Bereich, um eine Datei in Chrome?

Speichern PNG (etc.) Arbeit in diese demo in Firefox aber nicht in Chrome.

Umwandeln in PNG (etc.) in Firefox und Chrome.

Gibt es eine Möglichkeit, *in Chrom* speichern Sie ein Bild von einem canvas-element in einer lokalen Datei-oder auf einem server?

InformationsquelleAutor Sam Dutton | 2010-05-22
  1. 8

    Der einfachste Weg, es zu tun, ist die Verwendung der toDataURL() Funktion.

    Sagen, Sie haben eine Leinwand:

    var canvas =  document.getElementById("myCanvas");

    Dann mit einem button mit der id "saveButton", machen Sie es pop ein neues Fenster öffnen mit dem canvas als png, und der Benutzer kann speichern Sie die Seite.

    document.getElementById("saveButton").onClick = function() {
    window.open(canvas.toDataURL());
}
    • Problem mit diesem ist, dass (und Chrome) gibt es einen Fehler: SECURITY_ERR: DOM Exception 18. Die ich gefunden habe, verweisen auf diese Fehler (lists.w3.org/Archives/Public/public-webapi/2006May/0027.html, zum Beispiel), aber keine information darüber, ob (oder nicht), ist es möglich, diese zu umgehen.
    • Ich habe gerade entdeckt, dass der Fehler Auftritt, kann lokal-aber nicht, wenn der code auf einem server. Allerdings bin ich noch auf der Suche nach einem Weg, um ein Dialogfeld "Speichern unter" (wie in Firefox) und nicht nur öffnen Sie die PNG-Datei in einem neuen Fenster.
    • Ich bin mir ziemlich sicher, dass Sie nicht dazu führen, dass der speichern-dialog angezeigt werden; das beste, was Sie tun könnten, ist, öffnen Sie das resultierende PNG in einem neuen tab und der user speichern. Dies ist das Verhalten sehe ich in alle canvas-Applikationen, die ich gesehen habe. Bearbeitet meine Antwort für Fenster öffnen.
    • Oder Sie verwenden die server-Seite zu speichern Sie die Datei auf Ihrem computer. Dies ist, was Zwibbler mit Ihrer canvas speichert: zwibbler.com Und wenn Sie ein bisschen länger warten, die HTML5-FileAPI können Sie tun, Datenträger speichern.
    • Ich weiß, dass es nicht Teil der Frage, aber wer hat diese arbeiten in IE9?
    InformationsquelleAutor Timothy Armstrong
  2. 1

    Sam Dutton: (über die Kommentar-Links in Timothy Armstrong 's Antwort) Die" SECURITY_ERR: DOM Exception 18' Fehler, die Sie bekommen haben, ist wahrscheinlich, weil in der Leinwand haben Sie ein Bild geladen, kommt aus einer anderen Domäne, wie zB. vielleicht ist das Bild auf Ihrem server gehostet wird damit, warum der Fehler lokal aber nicht, wenn auf Ihrem server gehostet wird. Wenn Sie das laden von Bildern aus einer fremden Domäne in eine Leinwand, bestimmte API-Aufrufe sind verboten, aus Sicherheitsgründen, wie toDataUrl() und getPixelData(). Es ist ähnlich wie die same-origin-policy Problem mit cross-domain Ajax-Aufrufe.

    Als für die SaveAs-Canvas, browser-Implementierung ist fleckig, die für Browser, die nicht unterstützen, ich glaube, man kann immer noch die Leinwand als Bild erscheint, sondern innerhalb einer <img /> tag. Setzen Sie einfach das src-Attribut der Daten, die Sie erhalten zurück von toDataUrl(), dann können Sie laden den user ein, Rechte Maustaste -> speichern unter. Ich glaube, dass die demo in dem link, den Sie gepostet, tut das.

    • Vielen Dank für Ihre Kommentare. Die Sicherheit der 'Fehler' tritt auf, wenn toDataURL() ist lokal auszuführen (d.h. nicht auf einem server). Bauen Sie den Inhalt des canvas-element, ich bin Aufruf der Methode drawImage mit einem lokalen video-Datei als Quelle, d.h. wie diese: canvasContext.drawImage(videoEl, 0, 0, videoWidth / 2, videoHeight / 2);
    • Sind Sie sicher, dass die video-Datei selbst ist lokal, und kommen nicht von Ihrem server?
    • >> Sind Sie sicher, dass die video-Datei selbst ist local << ja: das video ist in ein lokales Verzeichnis und Zugriff über eine src-Pfad wie folgt aus: "video/meinvideo.ogv'.
    • Derzeit in Firefox die "SECURITY_ERR' wird geworfen, wenn die Datei-Protokoll " file:..' verwendet, aber das ist ein bug, siehe bugzilla.mozilla.org/show_bug.cgi?id=444641 um dies Zu vermeiden, Ausnahme, können Sie einfach laufen Sie die Seite auf einem lokalen Apache. Aber Sie sind mit diesem problem mit Chrome?
    InformationsquelleAutor Sunday Ironfoot
  3. 1

    diese kann Ihnen helfen : Leinwand-Datei

    • Lone link ist schlecht.
    InformationsquelleAutor Stephan
Schreibe einen Kommentar