jQuery-Plugin zum einfachen Zurechtschneiden von Bildern

Cropper
Keine Kommentare

Bilder spielen in der modernen Website-Gestaltung eine besonders wichtige Rolle. Dementsprechend gibt es bei deren Implementierung einiges zu beachten – etwa, was die richtige Optimierung angeht, um die User Experience und Performance nicht zu beeinträchtigen. Auch die Bearbeitung von Bildern wird immer wichtiger und natürlich gibt es dafür Unmengen an verschiedenen Tools.

Dabei muss es nicht immer die professionelle Bildbearbeitung sein, auch außerhalb von Photoshop und Co. gibt es viele Tools, die ein einfaches Bearbeiten von Bildern direkt auf der eigenen Website ermöglichen. Dazu gehört zum Beispiel das jQuery-Plugin Cropper, mit dem sich ganz leicht Bilder zurechtschneiden lassen.

Funktionen von Cropper

Cropper bringt für das einfache Zurechtschneiden von Bildern zahlreiche nützliche Funktionen mit sich. So unterstützt das jQuery-Plugin zum Beispiel viele verschiedene Optionen, Methoden und Events. Dazu gehört zum Beispiel die Einstellung des gewünschten Seitenverhältnisses, die Möglichkeit, zusätzliche Elemente für die Vorschau festzulegen oder das Plugin beim Ändern der Fenstergröße responsive neu einzustellen. Genauso kann das Bild beliebig gedreht, skaliert und gezoomt werden.

Ebenso unterstützt Cropper auch Touch, was angesichts der zunehmenden Nutzung von Mobile Devices viele Vorteile und weitere Einsatzmöglichkeiten bietet. Nützlich ist auch, dass die ausgegebenen Daten des bearbeiteten Bildes auf der ursprünglichen Bildgröße basieren. Damit kann das Bild insbesondere direkt zurechtgeschnitten werden, was die Arbeit deutlich vereinfacht.

Der Browser-Support von Cropper ist gut; unterstützt werden alle modernen Browser sowie der Internet Explorer ab Version 8. Mehr Informationen zu dem jQuery-Plugin finden sich zum Beispiel auf GitHub; die Projektseite hält darüber hinaus auch eine Demo bereit, die die Nutzung des Plugins in Aktion zeigt.

Name Cropper
Hersteller Fengyuan Chen
Projektwebsite http://fengyuanchen.github.io/cropper/
GitHub https://github.com/fengyuanchen/cropper
webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

Aufmacherbild: Vintage scissors on a wooden work table. Extremely shallow depth of field for impression-like feel. von Shutterstock / Urheberrecht: optimarc

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -