Bild aus einem DIV herunterladen

[Tony-S]

Hallo Forum,

ich erstelle mithilfe einer Bilbiothek über HTML5 einen CR-Code welcher dann in einem DIV liegt,
über das Kontextmenü und "Bild speichern unter" kann ich das ja runterladen - aber wie würde das über einen Button funktionieren?
Sprich so, dass der normale Save-Dialog kommt oder das Bild in ein Verzeichnis gespeichert wird.

Das was ich bisher gefunden habe war so etwas hier:

<div id="toolBox">
  <form action="f1.png">
    <input style="width: 100%" type="submit" name="downloadQR" value="Download"/>
  </form>
</div>

f1.png ist in dem Falle ja bereits als Datei vorhanden, das png in dem div ja nicht.
Ich ich kenn mich noch nicht sehr gut mit javascript und co. aus aber wenn mir jemand was beibringen kann, gern^^!

 

[Supeq]

Wenn ichs richtig verstanden habe, möchtest du unter deinem Bild einen Button, mit dem du das Bild downloaden kannst?

 

[Tony-S]

Exakt

 

[Supeq]

Okay, da gibts wie immer in der Programmierung viele Wege die zum Ziel führen.

Kennst du die das Event "onclick"?
Wenn nicht schau mal hier:
SELFHTML: JavaScript / Sprachelemente / Event-Handler

Dieses "Event","Trigger" wie immer man es nennen möchte, wird ausgelöst wenn auf ein HTML element (ob jetzt Button, div container etc. spielt erstmal keine Rolle) geklickt wird.
Der Knackpunkt ist nun die Funktion die bei eben diesem Klick ausgelöst wird. Diese kann in PHP, Javascript oder einer anderen Sprache geschrieben sein, wichtig ist nur dass sie an dieses Event gebunden, und dadurch aufgerufen wird.

Wie genau so eine "Datei-speichern" Funktion in Javascript oder PHP aussieht müsst ich auch nachgucken. Welche Scriptsprache bevorzugst du denn?

 

[Tony-S]

JavaScript - zumindestens sieht das ziemlich C-mäßig aus . Programmieren kann ich ja dann doch schon ein wenig, Quelltext verstehen ist also durchaus drinn nur hab ich noch nicht wirklich viel mit Webscripten gemacht.

PHP wäre auch möglich die entsprechenden Dienste könnte ich starten. Eigentlich isses ja egal wie aber wenn es mit JavaScript eleganter ist dann damit. Was mir auch wichtig ist das es allgemeingültig ist und nicht irgendein Browser aus der Reihe tanzt wobei das bei solchen Geschichten ja nicht der Fall sein sollte.

Wenn du eine Idee hast dann bitte her damit - ich such natürlich auch nach einer Lösung.

 

[Laubsauger]

Ist das Bild eine statische Datei, also liegt die unverändert auf dem Server?
Wenn die Datei statisch ist, wäre die beste Lösung eine .htaccess-Datei, wenn das bei dir Möglich ist.

Die Datei ist eine reine Text-Datei, in die du nur folgende Zeile schreibst:

AddType application/octet-stream .png

Die Datei muss dann in das Verzeichnis, in dem sich auch das Bild befindet. Durch diese Code-Zeile wird ein Header gesendet, der den Browser erkennen lässt, dass es sich um einen Download handelt und es nicht einfach so dargestellt werden soll. Durch diese Methode ist weite Browserkompatiblität gewährleistet.

Aufrufen kannst du das Bild dann mit dem obigen HTML-Formular, wie du es schon geschrieben hast.

Wenn das nicht geht, würde ich zu PHP (auch ohne JavaScript!) greifen, auf Wunsch zeige ich ein Beispiel.

Wenn das Bild allerdings mit JavaScript beim Benutzer erstellt wird geht es nur mit JavaScript, das wäre bei einem statischen Bild aber sehr unsinnig.

 

[Sippentreff]

Bild in eine rar packen und den Pfad auf den button verlinken