menatwork/valumsFileUploader — Issue #28: ClientSide Image-Scaling
Author: backbone87
Created: 2012-02-09 18:32:17+00:00
State: open

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/