Bild vor upload verkleinern

[tufanum]

Hallo an alle,

ich möchte Bilder vor einem Upload Client-Seitig verkleinern. Mit PHP habe ich damit keine Probleme. das ist dann aber Server-Seitig. Ich habe auch keine Probleme damit mit JavaScript die Bilder vor dem Upload zu verkleinern. Das Problem ist: ich möchte die Größe, die ein Bild beim speichern belegt verkleinern. Ich habe mir gedacht diese Größe vorzugeben (z.B. 1,5 MB) und dann die Bilder entsprechend zu verkleinern. Die Seitenverhältnisse von den einzelnen Bildern können unterschiedlich sein. Für die Client-Seitige Verkleinerung nach den Seitenverhältnissen verwende ich das canvas-Element.

Ist das, was ich mir überlege überhaupt machbar? Und wenn ja -> Was müsste ich beachten?

Danke euch schon Mal.

[Dormilich]

Ist das, was ich mir überlege überhaupt machbar?

Wenn es nicht unbedingt beim ersten Versuch klappen muss, geht das sicherlich. Die Größe (fileseize) eines Bildes läßt sich im vorhinein jedoch allenfalls schätzen.

[JaMa]

Warum machst du das ganze nicht einfach auf dem Server? Da gibt es einige Möglichkeiten, wie du Bilder komprimieren kannst (z.B. wie hier) und du bist nicht vom Client abhängig.
Wenn du es wirklich über den Client machen willst (was ich nur optional nutzen würde, wenn überhaupt), dann kannst du dir mit der Funktion toDataURL() einen Data URI geben lassen mit gewählter Qualität. Die URI kannst du dann als Textfeld übermitteln und auf dem Server mit Base64 decoden.

[lottikarotti]

Das Problem ist: ich möchte die Größe, die ein Bild beim speichern belegt verkleinern. Ich habe mir gedacht diese Größe vorzugeben (z.B. 1,5 MB) und dann die Bilder entsprechend zu verkleinern.

Dazu müsstest du ausrechnen mit welchen Maßen das Bild ca. 1,5MB groß ist. Ich denke das wird nicht ganz trivial. Einfacher ist es, die maximale Höhe / Breite vorzugeben und das Bild wenn notwendig zu verkleinern.

Die Seitenverhältnisse von den einzelnen Bildern können unterschiedlich sein. Für die Client-Seitige Verkleinerung nach den Seitenverhältnissen verwende ich das canvas-Element.

Ich nutze dafür meistens nodeca/pica.

Warum machst du das ganze nicht einfach auf dem Server? Da gibt es einige Möglichkeiten, wie du Bilder komprimieren kannst (z.B. wie hier) und du bist nicht vom Client abhängig.

Es gibt keinen Grund den User ein 5MB großes Bild hochladen zu lassen, wenn es später auf 200x200 runterskaliert wird. Ich denke es ist für beide Seiten besser wenn nur das an Daten transferiert wird, was auch notwendig ist.

Wenn du es wirklich über den Client machen willst (was ich nur optional nutzen würde, wenn überhaupt)

Serverseitig muss man so oder so nochmal ran, denn schließlich könnte jemand versuchen dir ein kompromittierter Bild unterzujubeln. Auch muss sichergestellt werden, dass das Bild auch die vorgeschriebenen Kriterien tatsächlich erfüllt. Auf Userinput darf man sich nicht verlassen.

dann kannst du dir mit der Funktion toDataURL() einen Data URI geben lassen mit gewählter Qualität. Die URI kannst du dann als Textfeld übermitteln und auf dem Server mit Base64 decoden.

Oder als BLOB per FormData.

[JaMa]

So wie ich das verstanden habe, soll nicht die Bildgröße verändert werden, sondern nur die Dateigröße?
Außerdem ist es doch besser das Bild so zu speichern wie man es vom Benutzer erhalten hat und es dann für den speziellen Zweck zu verarbeiten. So kann man später, falls man die Bilder noch in anderen Qualitäten oder Formaten ausspielen möchte, diese einfach generieren (inb4 Datensammelwut, yes).

[lottikarotti]

So wie ich das verstanden habe, soll nicht die Bildgröße verändert werden, sondern nur die Dateigröße?

Das geht nur indem man es komprimiert oder runterskaliert. Vermutlich wird es eine Kombination aus beidem.

Außerdem ist es doch besser das Bild so zu speichern wie man es vom Benutzer erhalten hat und es dann für den speziellen Zweck zu verarbeiten. So kann man später, falls man die Bilder noch in anderen Qualitäten oder Formaten ausspielen möchte, diese einfach generieren (inb4 Datensammelwut, yes).

Ich denke es ist in den wenigstens Fällen wirklich sinnvoll ein unkomprimiertes Bild mit einer riesigen Auflösung zum Server zu schicken. Meistens lässt sich eine sinnvolle Grenze definieren, wo man noch genügend Spielraum für andere Szenarien hat.

[JaMa]

Das geht nur indem man es komprimiert oder runterskaliert. Vermutlich wird es eine Kombination aus beidem.

Ob runterskalieren oder komprimieren oder beides hängt dann vom Anwendungsfall ab. Ich weiß nicht was OP machen möchte.

Ich denke es ist in den wenigstens Fällen wirklich sinnvoll ein unkomprimiertes Bild mit einer riesigen Auflösung zum Server zu schicken. Meistens lässt sich eine sinnvolle Grenze definieren, wo man noch genügend Spielraum für andere Szenarien hat.

Wenn ich z.B. Produktbilder hochlade, dann möchte ich dass das ohne Komprimierung/Skalierung hochgeladen wird, denn ich möchte das Bild in möglichst guter Qualität haben und später auch die Möglichkeit haben nach belieben Thumbnails generieren zu können.
Aber du hast Recht, gibt bestimmt einige Szenarien wo das ganze Sinn macht. Ich hatte das bisher nie im Einsatz.

[tufanum]

Hallo an alle,

Danke euch erst einmal für eure antworten.
Ich hatte erst alles Serverseitig programmiert. Allerdings gibt es Bilder, die 5 bis 8 MB groß sind, die von den Usern hochgeladen werden.
Die Benutzer laden min. 10 Bilder hoch. Das führt leider zu langen Uploadzeiten (natürlich keine Ewigkeit aber es dauert). Leider hat nicht Jeder eine gute Leitung.
Konkreter: Es gibt Benutzer die (Download 2000'er Leitungen haben.(Upload natürlich geringer)

Ich habe das Ganze vorerst wie folgt gelöst: Ich frage die Dateigröße ab. Habe einige if-Anweisungen in denen dann je nach Größe der Datei eine Verkleinerung der Breite stattfindet. Somit verkleinert sich auch die Dateigröße. Ich finde das aber nicht so gut, liefert aber vorerst gute Ergebnisse.

Ich lasse mir bereits ein toDataURL() liefern. Allerdings muss ich die Seitenverhältnisse (zu mindestens die Breite) vorgeben., erst dann wird die Dateigröße verringert. Ich bin leider in Javascript nicht der Schlauste und wüsste nicht wie ich die Qualität vor Upload beeinflussen könnte.

[protestix]

Kannst ja mal den jic image compressor testen.

[tufanum]

Kannst ja mal den jic image compressor testen.

Super. Danke.Sieht schon Mal interessant aus.

[tufanum]

Hallo,

ich habe den "JIC Image Compressor" getestet. Das Ergebnis ist => Wie erwartet kann man damit die Bildqualität runtersetzen. Leider gibt es Probleme bei IE und Edge. Die Bilder werden nur halb dargestellt. Dagegen liefern Chrome und Firefox sehr gute Ergebnisse. Noch zu erwähnen ist, dass mit Chrome und Firefox bei eingestellter 100%tiger Qualität die Bildgröße doppelt so groß ist als das original Bild.
Andere Browser habe ich nicht mehr getestet.

Fazit: ich bleibe vorerst bei meiner oben erwähnten Variante. Die Browser liefern zu mindestens akzeptable Ergebnisse.

Alle die das gleiche Problem haben, können unter dem folgenden Link eine Hilfestellung finden: Bilder vor Upload Verkleinern

Vielen Dank an Alle

[SimonMayers]

You can use some tool to reduce pictures before an upload client side such as Caesium, it is an image reduction utility in addition to image resizing.You can use this utility to compress images, reduce the image up to 95% image quality and resolution are no less.

[MOD: Link entfernt]

[hausl]

Bitte hier keine Werbungs-Links auf irgendwelche Spiele o.ä.! Danke!