Download-Button

[John Smith]

Hallo Zusammen

Möchte eine Homepage mit Bildern erstellen, die sich der User downloaden kann, wenn sie ihm gefallen...

Da ich es ziemlich umständlich finde jedes begehrte Bild per Rechtsklick und Speichern unter
zu downloaden bin ich auf der Suche nach alternativen...

Das Ziel ist:
-User sagt Bild gefällt mir -> Ein klick oder so und er hat es auf der Platte
-Praktikabel für X-Bilder, das heisst ev. Standartspeicherort Desktop oder so, damit ein
auswählen entfällt
-Analogie zu: User hat einen Stapel Bilder vor sich, schaut sie durch und legt alle beiseite die ihm gefallen und die er behalten möchte. Simpel und einfach ohne Umstände...

Hatte bereits Zwei Ideen, bin mir aber sicher ihr habt noch bessere...
1. Bei jedem Bild eine Button "Download" oder "Keep", beim Klick darauf wird das Bild heruntergeladen (Umsetzung: Ev. mit Javascript... Problem: Speicherort auswählen)
2. Beim Klick auf den Button wird das Bild in einen temporären "Warenkorb" gelegt. Der User kann dann mit einem Klick alle ausgewählten Bilder downloaden. Speicherort wählen wäre somit akzeptabel... Aber diese Umsetzung ist ein wenig träge, auch wenn der Benutzer nur ein Bild möchte oder in Eile ist...

So nun seid ihr gefragt... Habt ihr andere Ansätze? Oder Codebeispiele oder ähnliches?
Bin für jede Kritik offen, Fragen werden gerne beantwortet

MfG Smith

[Felix Riesterer]

Lieber John Smith,

-User sagt Bild gefällt mir -> Ein klick oder so und er hat es auf der Platte

das ist mit einem regulären Browser unmöglich. Ohne spezielles Plugin wird das wohl nichts, aber ein Browserplugin kommt für Dich sicherlich nicht infrage.

JavaScript hat keinen Zugriff auf Dateisysteme, daher wird es immer mindestens zwei Klicks für Dein Anliegen brauchen. Hätte JavaScript hingegen diesen ungehinderten Zugriff, könnte jede Seite ihre Lieblingsmalware auf Deinen Rechner herunterladen, ohne dass Du etwas davon mitbekommst - und das wollen wir doch lieber nicht, oder?

Bei jedem Bild eine Button "Download" oder "Keep", [...]
wird das Bild in einen temporären "Warenkorb" gelegt. Der User kann dann mit einem Klick alle ausgewählten Bilder downloaden.

Das ist mit reinen JavaScript-Mitteln auch nicht möglich, da der Download selbst eine Browsersache ist: Browser schickt einen Request an den Server, der beantwortet ihn (z.B. indem er eine ZIP-Datei mit den ausgewählten Bildern ausspuckt) und der Browser versucht mit den erhaltenen Daten etwas anzufangen (z.B. anzeigen) wenn er das kann - oder er bietet als letzte Idee den Download an.

Um serverseitig eine passende ZIP-Datei bereitzustellen benötigst Du entweder jede Menge ZIP-Dateien (eine für jede mögliche Wahlkombination, deren Pfad JavaScript anhand des "Warenkorbs" errechnet) oder eine serverseitige Scriptsprache, um die ZIP-Datei dynamisch zu generieren.

Liebe Grüße,

Felix Riesterer.

[1UnitedPower]

Das ist mit reinen JavaScript-Mitteln auch nicht möglich, da der Download selbst eine Browsersache ist: Browser schickt einen Request an den Server, der beantwortet ihn (z.B. indem er eine ZIP-Datei mit den ausgewählten Bildern ausspuckt)

Die Bilder sind ja in dem Fall schon einmal angefordert worden, also braucht es keinen zusätzlichen Request mehr. Man kann das Bild in einen Data-URI packen, und anschließend mit a-Element und download-Attribut dem User eine einfache Möglichkeit zum Speichern anbieten.

[Felix Riesterer]

Liebe(r) 1UnitedPower,

Die Bilder sind ja in dem Fall schon einmal angefordert worden, also braucht es keinen zusätzlichen Request mehr. Man kann das Bild in einen Data-URI packen, und anschließend mit a-Element und download-Attribut dem User eine einfache Möglichkeit zum Speichern anbieten.

Du willst also mit JavaScript eine ZIP-Datei erstellen, in der Du die bereits im Browsercache enthaltenen Bilder hineinrechnest? Aha... und wie soll das gehen? Wie kommt JavaScript an die Bilddaten der Bilder?

Liebe Grüße,

Felix Riesterer.

[1UnitedPower]

Du willst also mit JavaScript eine ZIP-Datei erstellen, in der Du die bereits im Browsercache enthaltenen Bilder hineinrechnest?

Nein, ich will das nicht, ich spreche nur von der theoretischen Machbarkeit, die du so schnell ausgeschlossen hast.

Aha... und wie soll das gehen? Wie kommt JavaScript an die Bilddaten der Bilder?

Man kann sie auf ein Canvas zeichnen lassen und dann geht's weiter mit der toDataURL oder toBlob.

[Felix Riesterer]

Lieber 1UnitedPower,

ich spreche nur von der theoretischen Machbarkeit, die du so schnell ausgeschlossen hast.

ich bin ob der Machbarkeit jetzt echt geschockt! Das stinkt doch sowas von nach Sicherheitsleck wie nur was! Wieder eine Front an der das übliche Rennen zwischen Hase und Igel (also Exploit und Patch) ausgetragen wird...

Man kann sie [Bilder] auf ein Canvas zeichnen lassen

Verstehe ich nicht. Wie soll das gehen?

und dann geht's weiter mit der toDataURL oder toBlob.

Das kann ich mir tatsächlich vorstellen. Aber wie bekomme ich die Bilddaten in mein canvas-Element? Und wenn ich sie da hinein bekomme, wieso bräuchte ich da überhaupt den Umweg über dieses Element?

Liebe Grüße,

Felix Riesterer.

[1UnitedPower]

Man kann sie [Bilder] auf ein Canvas zeichnen lassen

Verstehe ich nicht. Wie soll das gehen?

Wir haben glaube ich aneinander vorbei geredet. Du sprachst vom Cache, ich davon, dass die Bilder schon angefragt wurden und deswegen im DOM zur Verfügung stehen.

und dann geht's weiter mit der toDataURL oder toBlob.

Das kann ich mir tatsächlich vorstellen. Aber wie bekomme ich die Bilddaten in mein canvas-Element?

Wie gesagt, die Bilder werden nicht aus dem Cache geladen, sondern es wird davon Nutzen gemacht, dass die Bilder im DOM verfügbar sind. Dafür bietet die Canvas-API die Methode drawImage an.

Und wenn ich sie da hinein bekomme, wieso bräuchte ich da überhaupt den Umweg über dieses Element?

Der Umweg ist erforderlich, um an die Binärdaten des Bildes zu gelangen. Das image-Interface bietet leider keine Möglichkeit dazu. Das Canvas-Element muss allerdings nicht erst in das Dokument eingehangen werden, es reicht das Element zu erstellen, um die API nutzen zu können.

In den meisten Fällen würde ich Content-Disposition dennoch als Aufgabe des Servers betrachten. Die Javascript-Variante hat allerdings den Vorteil, dass sie auch noch funktioniert, wenn die Seite zwischendurch ihre Internet-Konnektivität verliert. Ganz grob gesagt, benutze ich für Standard-Webseiten serverseitige Techniken, bei Singel-Page-Web-Apps in der Regel clientseitige. Das ist natürlich keine Faustregel und unterscheidet sich von Anwendungsfall zu Anwendungsfall. Wie immer gilt es die Vor- und Nachteile abzuwägen.

Falls Interesse besteht, bastel ich gerne mal ein Beispiel-Skript.

[Felix Riesterer]

Lieber 1UnitedPower,

Wie gesagt, die Bilder werden nicht aus dem Cache geladen, sondern es wird davon Nutzen gemacht, dass die Bilder im DOM verfügbar sind. Dafür bietet die Canvas-API die Methode drawImage an.

jetzt verstehe ich Deinen Ansatz.

Der Umweg ist erforderlich, um an die Binärdaten des Bildes zu gelangen. Das image-Interface bietet leider keine Möglichkeit dazu. Das Canvas-Element muss allerdings nicht erst in das Dokument eingehangen werden, es reicht das Element zu erstellen, um die API nutzen zu können.

Alles klar. Danke für die Klarstellung! Mit der jszip-Klasse, die molily schon nannte, ist der Rest dann logisch.

Falls Interesse besteht, bastel ich gerne mal ein Beispiel-Skript.

Prinzipiell schon, aber das Prinzip habe ich jetzt verstanden. Danke!

Liebe Grüße,

Felix Riesterer.

[molily]

Hallo,

Du willst also mit JavaScript eine ZIP-Datei erstellen, in der Du die bereits im Browsercache enthaltenen Bilder hineinrechnest? Aha... und wie soll das gehen?

JavaScript kann vom Nutzer ausgewählte Binärdateien lesen und eine ZIP-Implementierung gibt es auch in JavaScript. Technisch wäre das schon möglich.

Mathias

[Felix Riesterer]

Lieber molily,

JavaScript kann vom Nutzer ausgewählte Binärdateien lesen

wie genau meinst Du das? Zugriff aufs Dateisystem? Oder etwas anderes außerhalb des Canvas-APIs?

und eine ZIP-Implementierung gibt es auch in JavaScript.

Krass!

Liebe Grüße,

Felix Riesterer.

[molily]

Hallo,

-User sagt Bild gefällt mir -> Ein klick oder so und er hat es auf der Platte
-Praktikabel für X-Bilder, das heisst ev. Standartspeicherort Desktop oder so, damit ein
auswählen entfällt

Das geht nicht mit HTTP/HTML/CSS/JavaScript alleine. Wo der Nutzer die Dateien speichert, muss er selbst auswählen; allerdings gibt es meist einen Standard-Speicherort, sodass der Download sofort anfängt, der Download aber bestätigt werden muss.

2. Beim Klick auf den Button wird das Bild in einen temporären "Warenkorb" gelegt. Der User kann dann mit einem Klick alle ausgewählten Bilder downloaden. Speicherort wählen wäre somit akzeptabel... Aber diese Umsetzung ist ein wenig träge, auch wenn der Benutzer nur ein Bild möchte oder in Eile ist...

Das ist die einzige Möglichkeit mit Boardmitteln. Das ist auch recht benutzerfreundlich lösbar. Bilder durch Klicken Auswählen und schließlich beim Checkout eine ZIP-Datei generieren, in der alle gewünschten Bilder enthalten sind. Dafür lässt sich ein übersichtliches und verständliches Interface bauen. Wenn nur ein Bild ausgewählt wurde, so ist die ZIP-Datei natürlich unnötig.

Mathias