[Erledigt] Bildausschnitt für nachfolgende Bearbeitung Clientseitig festlegen

RustyXXL · 03.03.2010, 12:32

Hallo,

ich habe ein kleines Problem derzeit bei dem ich etwas festhänge.
Ich arbeite derzeit an einem Projekt bei dem ich möchte, dass Benutzer Bilder hochladen können, diese dann angezeigt werden und dort mit einem Rahmen der später zu verwendende Bildausschnitt festgelegt werden kann.
Dieser soll dann wieder an den Server zurück geliefert werden, damit das endgültige Bild mittels der GD-Library erzeugt werden kann. Sprich es ist eigentlich nur notwendig dass der Server die Pixel eines Startpunktes geliefert bekommt....
Leider habe ich bisher noch 0 erfahrung mit JavaScript/Ajax und habe bisher auch durch Googeln keinen Wirklichen Anfang gefunden.
Vielleicht kann mir einer von euch vielleicht zumindest einen Tipp geben, wo ich am besten Anfange zu suchen...

Screeze · 03.03.2010, 14:14

Ich würde folgendes versuchen:

ein absolut positioniertes div, mit dem bild als hintergrund.
In diesen container packst du einen weiteren absoluten container. Dieser innere container ist dein "wählrahmen", welchen du per drag&drop positionieren lassen kannst.
Du kannst dann die pixelangaben des inneren container auswerten, die müssten dann die entsprechenden punkte liefern. anhand dieserund der grösse des containers kannst du dann den rest berechnen.

RustyXXL · 03.03.2010, 15:46

Vielen Dank für die Antwort, das klingt doch mal nach einem Brauchbaren Anfang

Ich melde mich sobald ich das entweder implementiert habe oder auf weitere Probleme stosse *g*

lstegelitz · 03.03.2010, 16:13

Fertige Lösungen findet man unter dem Stichwort "image crop":

8 Most Popular JavaScript Image Cropping Scripts | Hot Scripts Blog

(Fertig heisst: Um das JS Geraffel braucht man sich nicht kümmern, man muss es lediglich noch in seinen eigenen Code integrieren)

RustyXXL · 03.03.2010, 17:12

bei fertigen Lösungen lernt man aber meistens nichts oder nur wenig...

Ich habs jetzt soweit, dass es zwar noch hässlich ausschaut aber schonmal grundlegend funktioniert. Allerdings habe ich noch 2 kleine Probleme, vielleicht kann mich nochmal wer auf die richtige Spur bringen....

1. Es macht den anschein als würden Firefox und der IE die positionen des inneren Divs unterschiedlich berechnen. wenn ich den zieh-rahmen an der ursprünglichen Position belasse liefert mir Firefox -1,-1 als position zurück aber der IE liefert mir 1,1 als position zurück....wie krieg ich es am besten hin, dass ich auf beiden Systemen den selben Wert zurück bekomme...am liebsten 0,0 ^^
meine derzeitige idee wäre es das ganze später im php-teil abzufragen und entsprechend drauf zu reagieren, aber vielleicht gibt es ja auch eine clientseitige lösung?

Edit: Das problem hat sich erstmal erledigt, habe eine Lösung gefunden....sie lag die ganze Zeit direkt vor meiner Nase, aber manchmal ist man einfach blind *g*

2. Im JS versuche ich abzufangen, dass der Rahmen den Container-Div nicht verlassen kann. solange ich von Hand die Werte im if Statement einfüge funktioniert auch alles. mache ich es allerdings folgendermassen:

Code:

if((mouseX - offX) > 0 && (mouseY - offY) > 0 && (mouseX - offX) < (document.cont.width - document.rah.width) && (mouseY - offY) < (document.cont.height - document.rah.height) )

lässt sich der div nicht mehr verschieben.
Ich habe es mitlerweile eingegrenzt dass es an folgendem Teil liegen muss:

Code:

&& (mouseX - offX) < (document.cont.width - document.rah.width) && (mouseY - offY) < (document.cont.height - document.rah.height)

Wie gesagt, benutze ich feste werte funktioniert alles...

hier nochmal meine beiden derzeitigen divs:

Code:

<div name="cont" style="position:relative; top:10px; left:10px; width:600px; height:500px; border:1px solid black; overflow:hidden; background-image:url(t.jpg)">
	<div name="rah" style="position:absolute; top:10px; left:10px; border:2px solid red; width:100px; height:200px; cursor:pointer;" onmousedown="startDrag(this);">

Der hintergrund ist, dass ich eventuell einen etwas flexibleren container brauche....
Könnte mir vielleicht wer sagen, wo dort mein denkfehler liegt?

Edit: Nevermind....ich habs gefunden worans liegt....das "px" macht sich einfach nicht gut beim rechnen...^^
Darauf muss man aber auch erstmal kommen *g*

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

03.03.2010, 12:32
RustyXXL Erfahrener Benutzer Registriert seit: 03.03.2010 Beiträge: 221 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Bildausschnitt für nachfolgende Bearbeitung Clientseitig festlegen Hallo, ich habe ein kleines Problem derzeit bei dem ich etwas festhänge. Ich arbeite derzeit an einem Projekt bei dem ich möchte, dass Benutzer Bilder hochladen können, diese dann angezeigt werden und dort mit einem Rahmen der später zu verwendende Bildausschnitt festgelegt werden kann. Dieser soll dann wieder an den Server zurück geliefert werden, damit das endgültige Bild mittels der GD-Library erzeugt werden kann. Sprich es ist eigentlich nur notwendig dass der Server die Pixel eines Startpunktes geliefert bekommt.... Leider habe ich bisher noch 0 erfahrung mit JavaScript/Ajax und habe bisher auch durch Googeln keinen Wirklichen Anfang gefunden. Vielleicht kann mir einer von euch vielleicht zumindest einen Tipp geben, wo ich am besten Anfange zu suchen... Geändert von RustyXXL (03.03.2010 um 20:20 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

03.03.2010, 14:14
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	Ich würde folgendes versuchen: ein absolut positioniertes div, mit dem bild als hintergrund. In diesen container packst du einen weiteren absoluten container. Dieser innere container ist dein "wählrahmen", welchen du per drag&drop positionieren lassen kannst. Du kannst dann die pixelangaben des inneren container auswerten, die müssten dann die entsprechenden punkte liefern. anhand dieserund der grösse des containers kannst du dann den rest berechnen. __________________ Develovision Blog

03.03.2010, 15:46
RustyXXL Erfahrener Benutzer Registriert seit: 03.03.2010 Beiträge: 221 PHP-Kenntnisse: Fortgeschritten	Vielen Dank für die Antwort, das klingt doch mal nach einem Brauchbaren Anfang Ich melde mich sobald ich das entweder implementiert habe oder auf weitere Probleme stosse g

03.03.2010, 16:13
lstegelitz Erfahrener Benutzer Registriert seit: 07.09.2009 Beiträge: 3.891 PHP-Kenntnisse: Fortgeschritten	Fertige Lösungen findet man unter dem Stichwort "image crop": 8 Most Popular JavaScript Image Cropping Scripts \| Hot Scripts Blog (Fertig heisst: Um das JS Geraffel braucht man sich nicht kümmern, man muss es lediglich noch in seinen eigenen Code integrieren) __________________ Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

03.03.2010, 17:12
RustyXXL Erfahrener Benutzer Registriert seit: 03.03.2010 Beiträge: 221 PHP-Kenntnisse: Fortgeschritten	bei fertigen Lösungen lernt man aber meistens nichts oder nur wenig... Ich habs jetzt soweit, dass es zwar noch hässlich ausschaut aber schonmal grundlegend funktioniert. Allerdings habe ich noch 2 kleine Probleme, vielleicht kann mich nochmal wer auf die richtige Spur bringen.... 1. Es macht den anschein als würden Firefox und der IE die positionen des inneren Divs unterschiedlich berechnen. wenn ich den zieh-rahmen an der ursprünglichen Position belasse liefert mir Firefox -1,-1 als position zurück aber der IE liefert mir 1,1 als position zurück....wie krieg ich es am besten hin, dass ich auf beiden Systemen den selben Wert zurück bekomme...am liebsten 0,0 ^^ meine derzeitige idee wäre es das ganze später im php-teil abzufragen und entsprechend drauf zu reagieren, aber vielleicht gibt es ja auch eine clientseitige lösung? Edit: Das problem hat sich erstmal erledigt, habe eine Lösung gefunden....sie lag die ganze Zeit direkt vor meiner Nase, aber manchmal ist man einfach blind g 2. Im JS versuche ich abzufangen, dass der Rahmen den Container-Div nicht verlassen kann. solange ich von Hand die Werte im if Statement einfüge funktioniert auch alles. mache ich es allerdings folgendermassen: Code: if((mouseX - offX) > 0 && (mouseY - offY) > 0 && (mouseX - offX) < (document.cont.width - document.rah.width) && (mouseY - offY) < (document.cont.height - document.rah.height) ) lässt sich der div nicht mehr verschieben. Ich habe es mitlerweile eingegrenzt dass es an folgendem Teil liegen muss: Code: && (mouseX - offX) < (document.cont.width - document.rah.width) && (mouseY - offY) < (document.cont.height - document.rah.height) Wie gesagt, benutze ich feste werte funktioniert alles... hier nochmal meine beiden derzeitigen divs: Code: <div name="cont" style="position:relative; top:10px; left:10px; width:600px; height:500px; border:1px solid black; overflow:hidden; background-image:url(t.jpg)"> <div name="rah" style="position:absolute; top:10px; left:10px; border:2px solid red; width:100px; height:200px; cursor:pointer;" onmousedown="startDrag(this);"> Der hintergrund ist, dass ich eventuell einen etwas flexibleren container brauche.... Könnte mir vielleicht wer sagen, wo dort mein denkfehler liegt? Edit: Nevermind....ich habs gefunden worans liegt....das "px" macht sich einfach nicht gut beim rechnen...^^ Darauf muss man aber auch erstmal kommen g Geändert von RustyXXL (03.03.2010 um 18:06 Uhr).