Ajax Imagetransform

A

aKraus

Erfahrenes Mitglied
Hallo,

ich bräuchte ein Script, welches folgenden Ablauf beinhaltet:
1. Bild hochladen
2. Bereich eines Bildes mittels Javascript (ggf. Ajax) auswählen (im Format: 3:4)
3. den ausgewählten Bereich des Bildes ausschneiden
4. Wasserzeichen über das neu erstellte Bild (auswahl) setzen

Zusäztlich soll es möglich sein, auf einer anderen Seite Bereiche eines Bildes zu markieren (ähnlich StudiVZ).

Ich selbst hab bereits im Internet gesucht, leider aber immer nur Lösungen für IE gefunden. 45% meiner Pagebesucher nutzen FF und deshalb ist das ein "bisschen" ungünstigt ;-)

Es wäre cool, wenn jemand sowas schonmal gebraucht hat und mir vllt. weiterhelfen könnte ;-)

THX a lot
 
Was heißt nicht selbst machen wollen.
Eigentlich suche ich gute, browserunabhängige Beispiele.

Es wäre zwar perfekt, wenn ich es nicht selbst erstellen muss, allerdings muss das nicht umbedingt sein. Mein Problem ist nunmal, dass ich nur IE oder FF Beispiele gefunden hab. Alle anderen waren nicht kostenlos :-/
 
Mh dann nimm doch ein IE Beispiel als Ansatz her poste mal den code bei dem es unter IE funktioniert
 
Ich kann dir empfehlen mootools dafür zu verwenden, dann ist das recht einfach. Habe selber etwas ähnliches im Einsatz, hier mal die generelle Vorgehensweise:

1. Bild hochladen und in irgendeinen temporären Ordner kopieren, der vom Web aus zu erreichen ist

2. Ein Iframe in deine Seite einbinden, das auf eine dynamisch generierte HTML-Datei zeigt. In diese HTML-Datei wird das Bild eingebunden und zusätzlich ein Javascript-Code mit dem du später Bereiche markieren kannst.

3. Dieses Javascript muss enthalten: onmousedown, onmouseup, onmousemove Events.
onmousemove (bei nicht gedrückter Maus): ein transparentes, absolut positioniertes DIV-Element wird immer zur Position des Mauszeigers bewegt
onmousemove (bei gedrückter Maus): Breite, Höhe, Ausrichtung werden abhängig von der jetzigen Position der Maus relativ zur Position, bei der die Maustaste gedrückt wurde, angepasst
onmousedown: Hintergrundfarbe, Rand des DIV-Elements ändern und irgendwo speichern, dass die Maustaste gedrückt wurde
onmouseup: Speichern, dass die Maustaste losgelassen wurde

Optional, kann man jetzt noch kleine DIVs am Rand platzieren, mit dem man die Größe des DIVs ändern kann, aber das sollte fürs erste auch mal reichen.

4. Wenn der Benutzer mit dem Bereich zufrieden ist, kann er auf einen "weiter"-Button o.ä. klicken, dabei wird die Position des DIVs bestimmt und an PHP übermittelt, welches wiederum den entsprechenden Bereich herausschneiden oder andere Änderungen daran vornehmen kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück