Javacropper v1.0

gepostet am 10.05.2013 um 13:05 Uhr

cropperManchmal ist es notwendig, dass für den User eine Möglichkeit geschaffen wird, Bilder direkt auf deiner Seite zu schneiden. Damit ermöglichst du dem User z. B. ein Profilbild oder eine Bildvorschau zu erstellen. Mit diesem kleinen von mir geschriebenen Javascript und PHP -basierten Plugin kannstd du das auf einfachem Wege tun. Einfach einbinden und es kann losgehen.

 

Beispiel:

Beispiel folgt!

 

Download:

javacropperV1.0

 

Anleitung:

1. Einbinden:

Um den Javacropper v1.0 einzubinden, lade das zip file herunter und entpacke es. Kopiere dann den Ordner “cropper”  in das Verzeichnis deiner Webseite. Dann binde das Script cropper.js, das in dem kopierten Ordner liegt, in dem Head-Bereich deiner Seite ein:

Nun erstelle eine HTML-Form die den Javacropper lädt:

Gib dem Div, dass mit dem Cropper gefüllt werden muss in jedem Fall eine Klasse. Diese wird nachher noch benötigt, um das Div im Javascript zu finden. Die beiden input-Objekte sind wichtig! Sie können aber benannt werden, wie man will. Auch ob sie versteckt werden oder nicht ist egal. Lediglich das Attribut “name” muss, je nach dem ob es das Ausgangsbild, oder das Ergebnis ist, “javacropper_path” oder “javacropper_targetpath” heißen.

2. Einstellen:

Nun musst du den Cropper noch nach deinem Wunsch konfigurieren. Dafür kann man in der Datei cropper.js die Steuervariablen ändern. Folgende Variablen gibt es:

 

3. Verarbeiten des Posts:

Damit dein Post verarbeitet werden kann, fügst du nun in die php Datei, die das Ziel des Posts darstellt folgenden Code ein:

4. Benutzen:

Viel Spaß! 🙂 nicht vergessen Fehler zu melden!!! 🙂

 

FAQ:

Frage: Unter welcher Lizenz wird der Javacropper angeboten?
Antwort: Der Javacropper kommt unter der GNU GPL Lizenz.

 

Changelog:

1. Version 1.0:

19.01.2013: Onlinestellung der Erstversion. Erste volle Funktionalität.

 

Ältere Versionen:

Zurzeit gibt es nur eine Version.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.