ClientSide Image-Scaling

[backbone87]

Mir ist grad so ne Idee gekommen wie man den ganzen "Ich hab zuwenig Speicher auf meinem Server um meine 20 Megapixel Digicam Bilder zu skalieren!" oder "Ich brauche ne halbe Ewigkeit um meine 100 Bilder á 20 Megapixel hochzuladen!"-Kram abschaffen kann.

HTML5 FileAPI + Canvas

Vorgehensweise:

• Lokale Datei wird ausgewählt (via DnD oder Dateiauswahldialog)
• Datei wird auf Bild geprüft, wenn kein Bild dann normal Uploaden, wenn Bild dann weiter
• Bild skaliert in eine Canvas zeichnen (mit verschiedenen Graka Optimierungen wie AA/Filtering)
• Canvas.toDataURL() mit entsprechendem Bildtyp aufrufen
• Die skalierten B64 Daten an den Server schicken
• Server dekodiert B64 zu Binary und schreibt in ne Datei

Die Standard-Bild-Maximal-Größe für Uploads kann man vorgeben (wie jetzt auch), aber auch via Reiter "Experten-Konfiguration" Individuell anpassen (um automatisches Skalieren zu verhindern).

Ein paar Ressourcen zu dem Thema:
http://www.nihilogic.dk/labs/canvas2image/
http://stackoverflow.com/questions/371875/local-file-access-with-javascript
http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrome
http://www.html5rocks.com/en/tutorials/file/filesystem/
http://www.html5rocks.com/en/tutorials/file/dndfiles/

PS: Wenn toDataURL nicht klappt, könnte man auch Pixel für Pixel aus der Canvas auslesen, das Zippen, an den Server schicken, da wieder Pixel für Pixel in ne GD Canvas zeichnen und damit dann die Format Speicherung durchführen (gegebenenfalls mit PNG FilterOptimierung blablub)

[psi-4ward]

Das klingt mir grad etwas zu easy ;)

[backbone87]

Ja aber die FileAPI nutzen die doch sowieso schon, man kann nen FileBlob b64 konvertieren und b64 Bilder kann man in ne Canvas schreiben. Das einzige was etwas komplizierter wird, ist die Bildgröße aus dem Bildblob auszulesen, aber selbst das kann man sicher aus Java/PHP/... copy pasten für JS. Und wie gesagt Canvas.toDataURL support ist in Chrome und FF drinne (vll auch noch weitere) und selbst wenn hätte ich dafür ne alternative aufgezeigt.
So schwer scheint das echt nicht zu sein :D