Fotos markieren und in DB speichern

bumbumboris · 30.08.2007, 08:58

Hallo zusammen!

Ich habe folgendes Problem:

Ich würde gerne bei meiner Fotogallerie die Möglichkeit zur Verfügung stellen, dass ein bestimmter Bereich des Fotos markiert werden kann (kennt man z.B. aus verschiedenen Community's). Hat man den Bereich markiert (z.B. den Kopf der Person oder Ähnliches), kann man hierfür einen Text eingeben, der beim nächsten Aufrufen des Bildes ausgelesen wird. Es können auch mehrer Texte pro Bild ausgelesen werden.

Ich vermute mal, dass ich das mit einer Kombination aus PHP und Javascript machen muss. Vielleicht hat jemand diese Sache schon einmal umgesetzt und kann mir Hilfe oder Denkanstöße geben.

Vielen Dank im Voraus.

Gruß
BumBumBoris

Montellese · 30.08.2007, 10:01

Also die Markierung auf dem Foto selber musst du mit JavaScript machen. Die Idee dabei ist, die Mausposition zu bestimmen und je nachdem, wo der User dann halt hinzieht, z.B. ein <div> Element, das bisher unsichtbar war (visibility: hidden) sichtbar macht und die Grösse und absolute Position mit jeder Mausbewegung, während zum Beispiel die linke Maustaste gedrückt ist, ändert/anpasst. Dem <div> gibt man dann z.B. einen roten Rahmen oder eine bestimmte Hintergrundfarbe und macht das es mit opacity halb-transparent. Wenn die Markierung abgeschlossen ist, musst du irgendwo (z.B. in einem Hidden-Input) die Position der Markierung speichern. Das kannst du auf verschiedene Arten machen. Am besten speicherst du die Koordinaten des Punktes links oben und des Punktes rechts unten. Daraus kannst du dann direkt Höhe und Breite etc berechnen. Und diese Werte speicherst du dann in eine Datenbank zusammen mit dem eingegebenen Text und der ID des Bildes. Beim Ausgeben kannst du dann wieder ein <div> machen, das einfach absolut im Bild platziert ist. Mit den Platzierungen etc musst du bissl rumspielen, damit es auch genau stimmt.

Ich habe mal für Herr der Ringe einen Atlas gemacht, bei dem ich alle möglichen Orte und Gebiete eingetragen habe, da habe ich sowas ähnliches programmiert. Hab die Markierfunktion aber nie perfektioniert ^^

Sag Bescheid, wenn du noch mehr Denkanstösse brauchst, etwas nicht verstanden hast oder einfach sonst Hilfe brauchst.

bumbumboris · 30.08.2007, 13:18

Hi!

Zuerst einmal vielen Dank für Deine Antwort.

Was mir noch nicht so ganz klar ist, wie man es realisert, dass ein Rechteck geöffnet wird. Wahrscheinlich muss man dem user ein Button zur Verfügung stellen, den er dann anklicken kann. Dann kann er den Muaszeiger in das Bild setzen und dann mußt man abfragen, an welcher Position der die linke Taste drückt. Ist das so korrekt?

Hast Du vielleicht noch Javascript-Beispiele, wie man soetwas realisiert?

Gruß
BumBumBoris

Montellese · 30.08.2007, 13:32

Einen Button brauchst du dazu nicht unbedingt, macht aber Sinn, damit bei einem versehentlichen Klick ins Bild nicht sofort eine Markierung gestartet wird.

Wenn der User also auf den Button "Markieren" klickt, setzt du eine globale variable auf true. Mit dem onmousedown-Event registrierst du die Klicks auf das Bild. Und mit dem onmousemove-Event (in dem du aber unbedingt überprüfen musst, ob die Maustaste gerade gedrückt ist und ob überhaupt markiert werden soll, weil das Event grundsätzlich immer feuert, sobald die Maus bewegt wird) kannst du dann rausfinden, wo sich die Maus gerade befindet.

Einen gut kommentierten und fertigen Code habe ich gerade nicht da, aber wenn du mal nach onmousedown, onmouseup und onmousemove googlest (am besten bei SELFHTML: JavaScript/DOM vorbeigucken) wirst du sicher einiges lernen. Ich kann dir hier noch die Funktion zur Bestimmung der Maus-Position anfügen:

Code:

function mousePos(ev) {
    ev = ev || window.event;

    return {document.all ? ev.clientX : ev.pageX, document.all ? ev.clientY : ev.pageY};
}

ev ist meistens das onmousemove Event. Damit das in allen Browsern richtig funktioniert, würde ich die mousePos-Funktion folgendermassen aufrufen:

Code:

document.onmousemove = mousePos;

und das ausserhalb von allen Funktionen am besten in einem window.onload.

Falls du noch (viele) weitere Fragen hast, kannst du mich auch gerne per PN oder über MSN kontaktieren.

PS: Beim verändern des <div>s musst du dir genau überlegen, wie du das machst, denn je nachdem, wo der User seine Markierung anfängt, ist der Startpunkt (dort wo er zum ersten Mal klickt) natürlich nicht gleich der Punkt links oben.... Muss man halt bissl rechnen und rumprobieren, damit es richtig funktioniert

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Audio-Recorder / Zugriff auf Mikrofon -> speichern	agrajag	JavaScript, Ajax und mehr	4	27.07.2008 17:19
[Erledigt] Große Fotos online skalieren	stinger133	PHP Tipps 2008	52	04.07.2008 08:18
Bild Komprimiert speichern	Culutio	PHP-Fortgeschrittene	15	18.02.2007 18:54
PDF per PHP - Problem bei "Ziel speichern unter..."	freq.9	PHP Tipps 2006	7	18.08.2006 16:54
[Erledigt] Speichern unter... geht nicht!!!		PHP-Fortgeschrittene	8	09.02.2006 16:55
Fotos skalieren und speichern	CSS	PHP Tipps 2005-2	5	21.07.2005 11:12
Bild (.jpg) mit Link auf Festplatte speichern	PsychoEagle	PHP Tipps 2005-2	11	16.06.2005 14:54
Zukunft	TRW	Off-Topic Diskussionen	71	04.05.2005 15:31
Bilder speichern statt anzeigen...		PHP Tipps 2005	3	25.04.2005 15:22
XML speichern	McWolle	PHP-Fortgeschrittene	5	04.04.2005 19:38
[Erledigt] Emails speichern		Datenbanken	1	08.02.2005 20:06
Mail inkl. all. Elementen speichern		Beitragsarchiv	5	29.12.2004 13:21
Bild speichern das mit der GDLib erstellt wurde.	Stefano	PHP Tipps 2004	2	22.09.2004 11:53
Daten in einer Textdatei Speichern		PHP Tipps 2004	3	19.08.2004 17:13
Formular in Mysql Datenbank speichern	Anuschka	Datenbanken	1	15.08.2004 02:55

30.08.2007, 08:58
bumbumboris Neuer Benutzer Registriert seit: 30.08.2007 Beiträge: 2	Fotos markieren und in DB speichern Hallo zusammen! Ich habe folgendes Problem: Ich würde gerne bei meiner Fotogallerie die Möglichkeit zur Verfügung stellen, dass ein bestimmter Bereich des Fotos markiert werden kann (kennt man z.B. aus verschiedenen Community's). Hat man den Bereich markiert (z.B. den Kopf der Person oder Ähnliches), kann man hierfür einen Text eingeben, der beim nächsten Aufrufen des Bildes ausgelesen wird. Es können auch mehrer Texte pro Bild ausgelesen werden. Ich vermute mal, dass ich das mit einer Kombination aus PHP und Javascript machen muss. Vielleicht hat jemand diese Sache schon einmal umgesetzt und kann mir Hilfe oder Denkanstöße geben. Vielen Dank im Voraus. Gruß BumBumBoris


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

30.08.2007, 10:01
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Also die Markierung auf dem Foto selber musst du mit JavaScript machen. Die Idee dabei ist, die Mausposition zu bestimmen und je nachdem, wo der User dann halt hinzieht, z.B. ein <div> Element, das bisher unsichtbar war (visibility: hidden) sichtbar macht und die Grösse und absolute Position mit jeder Mausbewegung, während zum Beispiel die linke Maustaste gedrückt ist, ändert/anpasst. Dem <div> gibt man dann z.B. einen roten Rahmen oder eine bestimmte Hintergrundfarbe und macht das es mit opacity halb-transparent. Wenn die Markierung abgeschlossen ist, musst du irgendwo (z.B. in einem Hidden-Input) die Position der Markierung speichern. Das kannst du auf verschiedene Arten machen. Am besten speicherst du die Koordinaten des Punktes links oben und des Punktes rechts unten. Daraus kannst du dann direkt Höhe und Breite etc berechnen. Und diese Werte speicherst du dann in eine Datenbank zusammen mit dem eingegebenen Text und der ID des Bildes. Beim Ausgeben kannst du dann wieder ein <div> machen, das einfach absolut im Bild platziert ist. Mit den Platzierungen etc musst du bissl rumspielen, damit es auch genau stimmt. Ich habe mal für Herr der Ringe einen Atlas gemacht, bei dem ich alle möglichen Orte und Gebiete eingetragen habe, da habe ich sowas ähnliches programmiert. Hab die Markierfunktion aber nie perfektioniert ^^ Sag Bescheid, wenn du noch mehr Denkanstösse brauchst, etwas nicht verstanden hast oder einfach sonst Hilfe brauchst.

30.08.2007, 13:18
bumbumboris Neuer Benutzer Registriert seit: 30.08.2007 Beiträge: 2	Hi! Zuerst einmal vielen Dank für Deine Antwort. Was mir noch nicht so ganz klar ist, wie man es realisert, dass ein Rechteck geöffnet wird. Wahrscheinlich muss man dem user ein Button zur Verfügung stellen, den er dann anklicken kann. Dann kann er den Muaszeiger in das Bild setzen und dann mußt man abfragen, an welcher Position der die linke Taste drückt. Ist das so korrekt? Hast Du vielleicht noch Javascript-Beispiele, wie man soetwas realisiert? Gruß BumBumBoris

30.08.2007, 13:32
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Einen Button brauchst du dazu nicht unbedingt, macht aber Sinn, damit bei einem versehentlichen Klick ins Bild nicht sofort eine Markierung gestartet wird. Wenn der User also auf den Button "Markieren" klickt, setzt du eine globale variable auf true. Mit dem onmousedown-Event registrierst du die Klicks auf das Bild. Und mit dem onmousemove-Event (in dem du aber unbedingt überprüfen musst, ob die Maustaste gerade gedrückt ist und ob überhaupt markiert werden soll, weil das Event grundsätzlich immer feuert, sobald die Maus bewegt wird) kannst du dann rausfinden, wo sich die Maus gerade befindet. Einen gut kommentierten und fertigen Code habe ich gerade nicht da, aber wenn du mal nach onmousedown, onmouseup und onmousemove googlest (am besten bei SELFHTML: JavaScript/DOM vorbeigucken) wirst du sicher einiges lernen. Ich kann dir hier noch die Funktion zur Bestimmung der Maus-Position anfügen: Code: function mousePos(ev) { ev = ev \|\| window.event; return {document.all ? ev.clientX : ev.pageX, document.all ? ev.clientY : ev.pageY}; } ev ist meistens das onmousemove Event. Damit das in allen Browsern richtig funktioniert, würde ich die mousePos-Funktion folgendermassen aufrufen: Code: document.onmousemove = mousePos; und das ausserhalb von allen Funktionen am besten in einem window.onload. Falls du noch (viele) weitere Fragen hast, kannst du mich auch gerne per PN oder über MSN kontaktieren. PS: Beim verändern des <div>s musst du dir genau überlegen, wie du das machst, denn je nachdem, wo der User seine Markierung anfängt, ist der Startpunkt (dort wo er zum ersten Mal klickt) natürlich nicht gleich der Punkt links oben.... Muss man halt bissl rechnen und rumprobieren, damit es richtig funktioniert