Canvas als .jpg speichern auf verständliche Art?

nokiland

Mitglied
Hallilö,

diesmal geht es um HTML5 und dem Framework Kinetic.js.

Mit Hilfe von kinetic.js erstelle ich ein Canvas mit Bildcollage, Text und Drag & Drop. Funktioniert prima.

Der Besucher soll das Canvas auf seiner Festplatte als .jpg mit vernünftigem Dateinamen speichern können - zuverlässig von Chrome bis Safari.

Ja, es gibt "viele" Anleitungen im Internet, ist alles ganz einfach scheinbar. Doch verstehe ich weder englisch oder spanisch, noch helfen mir "Lösungen" von "Fach-Experten" die in ihrem ganzen Leben nur mit einem einzigen Browser arbeiten *g*.



Im Anhang ist ersichtlich um was es mir geht. Bilder werden ausgetauscht, der Text bleibt. Das Resultat/Bild möchte ich in allen aktuellen Browsern speichern können. Alles perfekt, doch ich möchte das "Bild im Canvas" einfach nur speichern können.
 
Hallo Spice, *g*.

Nimm den Anhang aus meinem anderen Post, in dem Du mich um ein Demo gefragt hast.

Ist aber einfach erklärt: Neben einem Canvas ein Button - klick ---> Fenster zur Abfrage des Speicherortes wird geöffnet - User trifft seine Entscheidung. Der Bildname sollte der original Bildname der Bilddatei sein.
 
Ich habe zum betrachten eine Version auf - entfernt - geladen. Das ist da, es fehlt aktuell die Speicherung des Canvas auf dem PC - MIT einem Button ....

Edit: Mußte Link wieder raus nehmen, ich mag nicht daß Google die Seite listet. Per PN ist es aber möglich.
 
Zuletzt bearbeitet:
Am einfachsten ist es, ein neues <image>-Element basierend auf der Data-URI des <canvas> zu erstellen (canvas.toDataURL('image/jpeg')). Nun kann der Nutzer einen Rechtsklick auf das Bild tätigen und es speichern.
Allerdings weiß ich nicht, wie es sich mit der Browserkompatibilität älterer Browser aufgrund der Data-URI verhält.
 

Neue Beiträge

Zurück