Bild online zuschneiden

[Rizzla]

Weiss zufällig jemand einen script mit dem man Bilder per PHP online zuschneiden kann so a lá Freistellungswerkzeug im PS?

User lädt Bild hoch, Zieht dann ne "Maske" innerhalb des Bildes welches dann genau auf die größe der Maske und deren Position geschnitten wird.

[seb]

Für was brauchst du das, bzw. ist die Bedienung durch 'Rahmen ziehen' per Maus unbedingt nötig?
Das ist nämlich wohl der schwierigste Teil der Sache.

Bildausschnitt herauskopieren und abspeichern ist mit PHP dank GD-Lib kein Problem, aber zuerst musst du natürlich die Eckkoordinaten des gewünschten Ausschnitts an PHP übergeben.
Am einfachsten gings's mit vier Textfeldern (oben links x, y und unten rechts x, y) - allerdings sicher nicht die benutzerfreundlichste Lösung.

Das Javascript zum Rahmen ziehen ist schon eher ne Herausforderung.

Ein paar Grundgedanken für nen Ansatz:

Mauskoordinaten bei Klick per Event-Handler abfragen (geht soweit ich weiß dummerweise nur absolut zur linken oberen Bildschirmecke, d.h. du müsstest die Koordinaten der linken oberen Bildecke abziehen, um die relative Position auf dem Bild zu erhalten), Mauskoordinaten X und Y in Text- oder Hidden-Felder eintragen und ein Statusflag für "Rahmen ziehen gerade in Aktion" setzen.

Ab dann den Rahmen malen (Vorschlag: DIV mit Rand und transparentem Hintergrund), von der Klickstelle bis zur aktuellen Mausposition und bei jeder Cursorbewegung aktualisieren.

Beim zweiten Klick wieder Mauskoordinaten ins Formular schreiben -> fertig. Das Formular kannst du dann ganz normal an dein PHP-Schneide-Script abschicken.

[Rizzla]

Jo - is klar soweit, bin auch schon dabei das so zu tippen. Dachte nur vielleicht gibts schon ein fertigen script. Man muss das Rad ja nicht immer neu erfinden gell

Werd es auch genau so machen wie du gedacht hast.
Bild wird hochgeladen und angezeigt. Dann per ersten mausklick ins Bild die Koordinaten auslesen und bei zweitem Klick wieder koordinaten auslesen, dann wird die ebene mit Rahmen erstellt die den ausschnitt darstellt, diese ist dann noch verschiebbar, damit noch feintuneing gemacht werden kann.

Werde das script dann mal posten sobald ichs hab, vielleicht kanns der eine oder andere ja mal brauchen.

[seb]

Ich probier es auch gerade aus - interessiert mich, und ich hätte unangenehmere Dinge zu tun

[Stuck Mojo]

Das geht! ...das Script dazu ist in diesem Buch: http://www.traum-projekt.com/html/bu...ript_codebook/
...das Beispielscript, dass ich da reingesetzt hab ist ähnlich deinen Anforderungen.

Gruss
Jan

[Rizzla]

Danke Jan - aber mich hat grad der Ehrgeiz gepackt. Und is auch nicht so kompliziert. Muss mich halt nur ein wenig durch JS durchackern, da ich da nicht so der Held bin, klappt aber ganz gut.

[Stuck Mojo]

bekommen wir das Ergebniss auch zu sehen?

[seb]

Extrem alpha, voller Fehler und IE only, aber im Prinzip funktionsfähig:

http://www.rotblind.de/gummiband/gummiband.html

Die Koordinaten sind nicht wirklich Bild-relativ, sondern beziehen sich auf das DIV aussenrum.
Es sollte eigentlich keinen Unterschied machen, da es ja keinen Innenabstand gibt, aber irgendwie isses trotzdem nicht so...naja.

[Stuck Mojo]

Der Fehler kommt daher, dass der Breite negative Werte zugewiesen werden.

Gruss
Jan

[seb]

Ich weiß, das ist einer.
Es wäre eh besser, wenn man den Rahmen auch von rechts nach links ziehen könnte, wäre ja auch machbar. Es soll ja nur eine 'Machbarkeitsstudie' sein, und die hat ihren Zweck erfüllt. Machbar ist es auf jeden Fall, mit weniger Umstand, als ich dachte.

[Rizzla]

Ok - den Javascript hab ich jetzt schon soweit, war doch ne ziemliche plackerei, da ich mit JS nicht wirklich viel am Hut habe, daher auch der sehr optimierungsfähige Quellcode. Aber es funktioniert. Ist jetzt nur mal grob, ich poste dann auch noch das fertige Projekt.

Klappt nur im IE.

Zum Script

[xStream]

Hey, das finde ich nicht schlecht!

naja fehlt nur noch das eigentliche Zuschneiden

Würde ich mit php + gdlib machen

da könnte ich helfen, wenn du es nicht hinbekommst


&cu
Philipp

[Rizzla]

Dank dir, aber Php hab ich drauf.

Und weils so schön ist werd ich doch ein bißchen eine umfangreichere Bildbearbeitung draus machen.

Mal sehen was mir noch so alles einfällt.

[Rizzla]

So jetzt klappt das mit dem online Bildfreistellen. Is immer noch nicht perfekt, ein paar Fehler gilt es noch abzufangen aber testen kann man es schon und sich die Funktionsweise mal anschauen.
Auf meinem Server ist im Moment nur die GD Lib 1.6 drauf. Mit der 2.0 die ich wohl installieren werde ist die Qualität des Beschnittenen Bildes wesentlich besser

Zur Beschneidung

[Lars]

Oha -- da gibt's anscheinend aber noch Komplikationen bei der Barmizva:

Warning: Division by zero in /home/www/webxxx/html/bildbearbeitung/verarbeitung.php on line 6

Und ja, mein Bild war koscher.