Was macht dieses Skript?

Dieses Skript bietet eine Funktionalität, um Auswahlbereiche auf ein Bild zu zeichnen und die entsprechenden Informationen an ein Formular zu übergeben. Dieses kann dann abgesendet und von einem serverseitigen Skript weiter verarbeitet werden, um das Bild in der entsprechenden Größe zuzuschneiden (z.B. mit Hilfe der PHP GD2-Funktionen oder mit einem ImageMagick-Aufruf).

Benutzung

Die Einbindung des Skripts an sich erfolgt ganz normal über einen Aufruf, der beispielsweise im HEAD-Teil einer HTML-Seite untergebracht werden kann.

<script type="text/javascript" src="imagecrop3.0.js"></script>

Dieses Skript hängt von einigen HTML-Elementen ab, die hier zusammen arbeiten. Wie angesprochen benötigt man Eingabefelder, in denen die Informationen für den Punkt der linken oberen Ecke der Auswahl sowie deren Höhe und Breite untergebracht werden. Dies können auch unsichtbare Eingabefelder sein:

<input type="hidden" id="ic_top"/>
<input type="hidden" id="ic_left"/>
<input type="hidden" id="ic_height"/>
<input type="hidden" id="ic_width"/>

Weiterhin benötigt werden ein DIV-Container, der den Zuschneidebereich markiert (unten mit einem Karomuster hinterlegt) und darin der Bereich, der das zuzuschneidende Bild als Hintergrundbild beinhaltet und dessen Größe besitzt.

Ein Beispielstyling des HTML-Teils kann übrigens im ImageCrop-Stylesheet betrachtet werden, welches sich auch auf das animierte Hintergrundbild bezieht, welches die Auswahllinien so aussehen lässt wie in den meisten Bildbearbeitungsprogrammen.

<div id="actionarea" class="crosshair">
 <div id="crop" style="background-image:url(bild.jpg);height:123px;width:456px">
 </div>
</div>

Abschließend muss das Skript initialisiert werden. Dies erfolgt durch Instanziierung der lx_crop-Klasse mit den entsprechenden IDs der Eingabefelder und DIVs als Parameter. Die ersten zwei Parameter bezeichnen dabei die Container des Gesamtauswahlbereiches und des Aktionsrahmens. Der letzte Satz Parameter enthält die Formularfelder, in die die Maße der Auswahl eingetragen werden. Letztendlich muss das Zuschneide-Skript noch aktiviert werden.

<script type="text/javascript">
 crap = new lx_crop('crop','actionarea',
                    'ic_left','ic_top','ic_width','ic_height');

  crap.setActive(true);

Durch die Initialisierung eines Zuschneideobjektes und dessen explizite Aktivierung mittels setActive() ist es möglich, mehrere Auswahlen auf der gleichen Seite zu betreiben. Dabei sollte nur darauf geachtet werden, dass jeweils nur ein Bereich aktiv ist.

Schließlich können auch noch Hilfetexte für die einzelnen Elemente festgelegt werden. Diese Texte erscheinen in einem kleinen Tooltip, wenn der Mauszeiger in bestimmte Bereiche bewegt wird.

  crap.setI18Ntitle('Wand','klicken und ziehen zum verschieben');
 crap.setI18Ntitle('Act','klicken und ziehen um Auswahl zu markieren');
 crap.setI18Ntitle('resizers','klicken und ziehen um Größe der Auswahl zu ändern');
</script>

Demo

Einschränkungen

• kein Elternelement im DOM-Tree darf eine besondere Positionierung (absolut, relativ) haben, da sonst die Markierung einer Auswahl zu eigenartigen Effekten führt.

Bemerkungen

Es gibt einige Tastaturfunktionen:

• PFEILTASTEN bewegen die Auswahl
• BILD-HOCH/BILD-RUNTER vergrößern bzw. verkleinern die Auswahl
• die UMSCHALTTASTE mit einer der oben erwähnten Tasten führt die benannte Aktion in größeren Schritten aus
• POS1 markiert die größtmögliche Auswahl
• ESC/ENTF/ENDE entfernt die Auswahl

Skript-Datei herunterladen

Versionsgeschichte

v3.0

• Hinweis: diese Version ist nur eingeschränkt rückwärtskompatibel zu Version 2.x, zum Updaten muss der erste Parameter entfernt werden, ebenso das mittlere Quartett an Parametern (siehe unten) und die "wand"- und "cover"-DIVs müssen aus dem HTML-Code entfernt werden, da diese jetzt vom Skript automagisch generiert werden; ein festes Seitenverhältnis wird jetzt durch eine Setter-Methode definiert und einiges hat sich auch beim Styling getan (alt, neu)
• Feature: der Auswahlbereich wird nun automatisch generiert und muss der Klasse nicht mehr übergeben werden (daher wurde der erste Parameter entfernt)
• Feature: die Abdeckbereiche werden nun automatisch generiert und müssen der Klasse nicht mehr übergeben werden (daher wurde der mittlere Satz von 4 Parametern entfernt)
• Feature: die Auswahlbereichs-Linien werden nun automatisch generiert und müssen nicht mehr im HTML-Code definiert werden
• Feature: nachträgliches Vergrößern/Verkleinern einer Auswahl mit der Maus
• Feature: Hilfetexte können festgelegt werden, die angezeigt werden, wenn man mit der Maus über bestimte Bereiche fährt
• Misc: eventuell verbesserte Performance: weniger Eventhandling
• Misc: neue Methode: setAspectRatio(), bitte diese Methode benutzen statt fixAspectRatio direkt zu setzen

v2.1

• Bugfix: Tastatureingaben werden nun korrekt behandelt, auch wenn keine Aktion möglich war
• Bugfix: Auswahlen mit größerer Höhe als Breite werden beim Vergrößern/Verkleinern nun korrekt behandelt

v2.0

• Hinweis: diese Version ist nicht mehr kompatibel zu v1.x. Wenn du eine Version mit Bugfixes nutzen möchtest ohne die neue API zu verwenden, benutze bitte Version 1.5. Der 1.x-Zweig wird allerdings nicht weiter aktualisiert.
• Misc: alle Funktionen wurden in einem Objekt zusammengefasst, um mehrere Instanzen auf der gleichen Seite und frei benennbare Eingabefelder und Elemente zu ermöglichen
• Feature: der Auswahlbereich kann nun auch über den Methodenaufruf maximizeSelection() maximiert werden
• Feature: durch die Methode setSelection() kann ein Auswahlbereich vordefiniert werden
• Feature: das Scrollen auf der Seite durch Benutzung der Cursor- und Bildtasten sollte nun deaktiviert sein
• Misc: einige kleinere Performanzoptimierungen

v1.5

• Bugfix: das Aufziehen der Auswahl von unten nach oben gibt nun korrekte Werte zurück
• Bugfix: Auswahlaufhebung in der oberen linken Ecke gibt keine fehlerhaften Werte mehr zurück

v1.4

• Feature: horizontales Scrolling wird berücksichtigt
• Bugfix: Positionierung mit den Tasten lieferte falsche Werte
• Bugfix: "Auswahl maximieren" nachdem bereits eine Auswahl getroffen wurde
• Misc: bessere XHTML-Unterstützung

v1.3

• Feature: Aktionsrahmen um das Bild

v1.2

• Bugfix: Auswahl kann nach oben aufgezogen werden, wenn das Dokument gescrollt ist
• Feature: Selektion kann beendet werden, währen der Mauszeiger sich nicht mehr im Bild befindet
• Feature: Auswahl aufheben auch mit ENTF und ESC

v1.1

• Bugfix: Verschieben ohne Auswahl
• Bugfix: Auswahlproblem im Firefox
• Feature: schnelleres Verschieben und Vergrößern/Verkleinern der Auswahl mit der UMSCHALT-Taste
• Feature: Größenänderung umbelegt auf BILD-HOCH/BILD-RUNTER aufgrund der "suchen während man tippt"-Funktionalität in einigen Browsern
• Feature: größte Auswahl treffen mit POS1-Taste
• Feature: Auswahl aufheben mit ENDE-Taste

v1.0

• erste Veröffentlichung als Bestandteil von wwEdit CMS