Pfeile auf ein Bild schieben und beides speichern

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo liebes Forum,
nach langer Zeit habe ich mal wieder eine interessante Frage.

Ist es mit Ajax oder einfach nur Javascript möglich einen Pfeil auf ein beliebiges Foto per drag and drop zu schieben und beides zusammen dann als ein Foto abzuspeichern?

Ich suche schon lange ein image manipulation programm mit Pfeilen, die man zeichnen kann, habe aber bisher noch kein einziges gefunden.

Wir würde lediglich die Funktion genügen, mit der ich einen simplen Pfeil auf einem beliebigen von mir stammenden Foto zeichnen kann, damit ich auf ein wesentliches Merkmal hinweisen kann.

Ist sowas oder ähnliches bekannt? Tips und Tricks sind immer gerne gesehen. Ich würde es ja selber programmieren aber meine Programmierkenntnisse bei Javascript auf.

Vielen Dank für jegliche Hilfe.

Grüße aus Köln
Mo

#2

Hallo Mo,

tipp: canvas

mit drawImage() kannst da Bilder reinschreiben
die Positionierung mittels JS und event-handler

speichern geht aber nur lokal über browser

h♥rzlichen Gruß
Nitya

#3

Hi Nitya,

erstmal herzlichen Dank für Deine hilfreichen Tips.
Bin jetzt erst dazu gekommen mich zurück zu melden.

Das Script, welches Du mir zuletzt gezeigt hast, ist schon ganz gut und entspricht genau dem was ich angefragt habe.

Nun noch zwei weitere Fragen.

1.) Ist es möglich das Objekt zu drehen, welches ich auf das Foto gesetzt habe?

2.) Wie kann ich Pfeile selber zeichnen, wie es z.B. in Word möglich ist?

Mir würde auch reichen, wenn ich die Pfeile auseinander ziehen kann und auf dem Foto bewegen kann.

Hast Du hierfür auch noch einen Tip?

Vielen Dank und herzliche Grüße
Mo

#4

Hi Mo,

1.) Ist es möglich das Objekt zu drehen, welches ich auf das
Foto gesetzt habe?

Nein … nur vorher möglich mit rotate() … sobald drawimage ausgeführt wird nicht mehr

2.) Wie kann ich Pfeile selber zeichnen, wie es z.B. in Word
möglich ist?

Bietet sich gif oder png format an, damit der hintergrund transparent gemacht werden kann.
Also ein Grafikprogramm das diese unterstützt.

Mir würde auch reichen, wenn ich die Pfeile auseinander ziehen
kann und auf dem Foto bewegen kann.

mmhh … auf dem original = linkes Bild wird ja gezeigt (so eine Art Vorschau) an welcher Position der/die Pfeil(e) beim mouse-click gesetzt wird.
Wenn was nicht passt … einfach neu laden :smile:

Oder meinst du die Pfeile in sich „langziehen“?
Könnte man beim der Anweisung über width machen:
var faktor=1.5; drawImage(marker,XX,YY,Mwidth*faktor,Mheight)

h♥rzlichen Gruß
Nitya

#5

Hi Nitya,

super…vielen Dank für die vielen Tips.
Ich werde mal versuchen das zu realisieren. Mal sehen ob mein kleines Bisschen Javascript dafür ausreicht.

Besten Dank und viele Grüße
Mo

#6

Hi Mo,

habe das „stretching“ für breite und höhe eingebaut … also mal gucken gehen :wink:

Wenn noch Fragen oder Wünsche hast … her damit

h♥rzlichen Gruß
Nitya

#7

Moin,

sehr cool. Kann man das Stretching auch mit dem Mauszeiger direkt per Mausklick erledigen, in dem man einfach auf den Pfeil klickt und diesen in die Breite oder etwas schmaler zieht?
Es wäre auch klasse, wenn man die Pfeilspitze links oder rechts herum mit der Maus bewegen könnte.

Ist das machbar für einen Profi wie Dich?

Ganz liebe Grüße und einen fantastischen Tag wünscht
der Mo :wink:

#8

Tach,

sehr cool. Kann man das Stretching auch mit dem Mauszeiger
direkt per Mausklick erledigen, in dem man einfach auf den
Pfeil klickt und diesen in die Breite oder etwas schmaler
zieht?

jo … geht mit mouse-events, aber nur in Verbindung mit mouseup und mousemove … click kannst hierbei vergessen

Es wäre auch klasse, wenn man die Pfeilspitze links oder
rechts herum mit der Maus bewegen könnte.

??? KA was Du meinst !!!
„Pfeil“ ist der frei (per click) wählbare Marker

Ist das machbar für einen Profi wie Dich?

sicher :smile:))

Schick mal nen link, wo ich Deine Page mal angucken kann … ist immer besser mit dem Vorhandenen zu arbeiten.

h♥rzlichen Gruß
Nitya

#9

Hi Nitya,

eine Page habe ich eigentlich nicht. Ich arbeite lokal auf meinem PC und habe nichts veröffentlicht. Leider kann ich überhaupt keine canvas-Programmierung.

Als Code habe ich auch nur das, was ich von Dir erhalten habe.

Anbei noch was ich gerne erreichen möchte:

  • Ein beliebiges Foto auswählen und anzeigen lassen

  • Auf dem angezeigten Foto ein oder mehrere Pfeile positionieren

  • Die Pfeile möglichst dynamisch positionieren, sodass man sie markieren und verschieben kann.

  • Transparente Quadrate zeichnen um etwas markieren zu können

  • Diese Quadrate frei auf dem angezeigten Foto verschieben können.

  • Das neue Foto mit den Pfeilen und Quadraten auf meine Festplatte speichern.

Ist das möglich? Gibt es irgendwo soetwas herunter zu laden oder kannst Du soetwas programmieren oder mir zeigen wie ich es programmieren kann?

Das wäre klasse!

Vorab vielen Dank und viele Grüße
Centauro :wink: