Per JS ein Bild-Bereich ( Quadrat oder Kreis ) anpassen + skalierbar

[zorndyuke]

Guten Tag liebe HTML.de Community. *edit* Ich habe gerade bemerkt, dass "ENTER" nicht funktioniert, aber HTML Break Tags.. bin gerade dabei wieder Ordnung im Text zu schaffen -.- */edit*

Ich suche nach einer Bezeichnung, dem Weg oder ein OpenSource Script welches folgendes kann:

• Man kann ein Bild uploaden
• Zu diesem Bild kann man nun ein z.B. Kreis oder Viereck dazu Skalieren lassen, welcher den Sichtbereich bzw. den Bereich auswählt, welcher dann als Ergebnis angezeigt wird.

Als Beispiel: Kennt Ihr diese Virtuellen T-Shirts wo man dann z.B. sein eigenes Logo drauf packen kann?
Sowas in der Art will ich auch bewerkstelligen auch mit z.B. einem Bierdeckel. Das Bierdeckel ist dann vorgegeben und man kann ein Pic hochladen und Kreisförmig skalieren lassen, alles außerhalb des Bierdeckel Kreises wird dann nicht drauf gepackt. ( Auch nicht in der bearbeitung Sichtbar, einfach z.B. den AußenRand Grau erscheinend lassen. )

Ich nehme mal an das es Quadratisch leichter sein wird als Kreisförmig, trotzdem würde ich eure Hilfe in Anspruch nehmen wollen.
Gibt es dazu offene Script die ich zur Vorlage nehmen könnte oder gibt es dazu ein bestimmten Namen das ich selbst suchen kann?
Ansonsten würde mir auch jede Hilfe in sachen, "so ist das am klügsten zu coden: ...". Vielen Dank für jede Hilfe! Bei unklarheiten, einfach schreiben, ich versuche mich dann besser zu verständigen.

Mit freundlichen Grüßen

P.S. warum macht der alle Breaks weg, mein Kompletter Beitrag sieht jetzt sooo unleserlich aus... eine Hölle für das Auge :(

 

[Gilles]

Hm. Das was du vorhast wird wohl eine Mischung aus PHP (oder andere serverseitige Sprache) und JS sein.
Ich hab das hier gefunden: DeepLiquid » Jcrop Image Cropping Demos
Und bei dir funktioniert das normale Enter nicht?
merkwürdig. Auch Quoten kannst du über [noparse]

Zitat

[/noparse] (Habs natürlich jetzt nicht parsen lassen ;))

 

[zorndyuke]

Hallo Gilles, vielen Dank für die Antwort! Nun hab ich eine bessere Basis als ich das versucht habe. Das ist genau das was ich gesucht habe, hoffentlich gibts das auch für Kreise :S Wenn jemand etwas für Kreise kennt, wäre ich dankbar für Infos, vielen Dank!

 

[zorndyuke]

So ich noch nochmal =)

Hab das mit dem Cropping nun hinbekommen und irgendwie weiß ich gerade nicht, inwiefern mir das jetzt weiter hilft :S :S

Ich habe soviel "normal" gearbeitet, dazu nebenbei soviel wie möglich an neuen jQuery tricks gelernt.. sliding.. resizing.. cropping.. noch ein bisschen was von der GD Libabry kennen gelernt.. am liebsten ab nach hause und ausruhen..

Hat jemand noch "nur" eine -Idee- wie ich mit all den sachen an mein Ziel komme? Zum wiederholen:

Ich möchte sowas ähnliches wie beim Cropping, das z.B. ein T-Shirt angezeigt wird.
Daneben ist ein Upload Formular, womit man z.B. ein Logo Uploaded und dieses kann man dann auf dem Tshirt platzieren, Skalieren und anpassen, alles was außerhalb des Tshirts ist, soll ausgegraut werden.

P.S. danke für die vorrige Hilfe, wird mir sicher in später Zukunft noch eine Menge helfen, auch in sachen jQuery ;)

*EDIT*

DIE IDEE!!!

Zuerst kommt das tshirt, danach das Upload des Bildes.
Als nächstes kommt die Platzierung + Skalierung ( Draggable + Resizable ).
Nächster Schritt ist es, eine Fläsche die genau das gegenteil vom Tshirt ist, also wie ein Viereck mit einem Tshirt ausgeschnitten, auf die OBERSTE Ebene per Z-Index zu legen.

Dieser ist genau außerhalb des Tshirts und überdeckt das Tshirt und das Logo drauf nicht, nur alles was außerhalb des Tshirts ist und somit unter dem Bereich der obersten Ebene!


Das könnte es gewesen sein.. nur noch austesten.. boa mein Kopf.. ich bin so fertig ..