Free Image Cropping Web Plugin von UvumiTools mit Cross-Browserfunktionalität in reinem Javascript

Es war an der Zeit das lästige, übriggebliebene Flash zum Bilder uploaden und zuschneiden verschwinden zu lassen um eine reine Javascript Plattform zu haben. Das Flash-Zuschneidtool war alles in allem ca. 450kb gross. Mit Javascript kann nun die gleich Funktion mit ca. 30kb bewerkstelligt werden.

Da ich mit Mootools arbeite habe ich Cropping Tools gesucht, welche mit Mootools unterstützt. Ich habe vier Crop-Tools genauer angesehen:

  1. UvumiTools Crop 2.0.0
  2. MooCrop
  3. Lasso.Crop
  4. Resizeyourimage
  • Zuerst habe ich das Tool von http://www.resizeyourimage.com/ nachgebaut. Problem dabei war, das ein Pear-Tool für den Upload der Bilder benutzt wird. Ansonsten eine reine Javascript-Anwendung und sehr fein programmiert. Hut ab.
  • MooCrop funktioniert gut auch in Mootools 1.2. allerdings fehlt mir bei MooCrop dabei eine keepRatio Funktionalität. keepRatio soll das Seitenverhältniss von Länge zu Breite konstant halten bei der Auswahl. Zuerst wollte ich es einbauen, doch dann bemerkte ich, dass Lasso.Crop genau dieses Feature beinhaltet.
  • Lasso.Crop hat das Feature keepRatio. Doch Beispiele sind spärlich und das rauskitzeln der Koordinaten fürs zuschneiden des Bildes dauern etwas. Ausserdem war keine Serverseitige Anbindung fürs zuschneiden und speichern der Bildausschnitte vorhanden.
  • Somit landete ich bei UvumiTools. Auf der Page gibt es zahlreiche Beispiele, einen Download mit BeispielCode und hauffenweise Features um das Tool zu konfigurieren. Obendrein ist es nur 28kb leicht was bei Webanwendungen nicht ausser acht zu lassen ist. Zusätzlich gibt es eine Serverseitige Anbindung zum zuschneiden und speichern des ausgewählten Ausschnittes. Es können auch Parameter mitgesendet werden zum speichern. Ich habe gleich die Parameter des ausgewählten Ausschnittes ausgelesen und diese in unser Standard AJAX Request eingebaut, somit konnte das uvumitool zu 100% in unser Framework eingebunden werden.

Weitere Links:

Ein Kommentar

Schreibe einen Kommentar


*