[Javascript/PHP] Image manipulation

martin

Well-Known Member
Moin

ich brauche für ein Projekt die Möglichkeit Objekte (Kreise, Rechtecke, Bilder, usw.) in einem Bild zu verschieben. Ungefähr so wie auf dieser Seite -> http://rectangleworld.com/demos/SimpleDragging/SimpleDragging nur eben mit der Möglchkeit vorhandene Objekte auch zu löschen bzw. neue hinzu zu fügen. Im Anschluss sollte dann das so erstellte Bild abgespeichert werden können und zwar nicht nur als png oder jpg, sondern so, dass man das Bild jederzeit wieder laden und bearbeiten kann (also die Objekte wieder neu positionieren, löschen, hinzufügen, usw.).
Mit Konva (http://konvajs.github.io/) habe ich ein Framework gefunden womit das einigermaßen machbar zu sein scheint, alles außer dem Speichern der Objekte und deren Positionen. Ich kann damit lediglich pngs oder jpgs erstellen, was wie erwähnt nicht ausereichend ist.
Bei einer Google-Recherche kamen mir schnell Zweifel, welches Bildformat dafür das Geeignetere ist: canvas oder svg. Was meint ihr zu dem Thema? Hat vielleicht jemand einen Tip wie ich das Ganze am besten realisieren könnte? Oder noch besser, kennt vielleicht jemand ein Javascript Framework mit welchem folgende Anforderungen realisiert werden können:
- Vordefinierte "Objekte" (Kreise, Rechtecke, Icons) zu einem Bild hinzufügen, löschen, positionieren (Änderung der Größe muss nicht sein!)
- Möglichkeit der Speicherung der Objekte und Positionen in eine Datei oder Datenbank
- Öffnen gespeicherter Bilder und Möglichkeit der anschließenden Bearbeitung

ich bin schon gespannt auf eure Ideen
grüße
 
Moin Martin,

schau Dir mal OpenLayers3 und dessen API-Doku an. Du kannst das Framework nicht nur für geografische Darstellungen benutzen, sondern letztlich für alles, was mit Vektoren zu tun hat.

Grüßle Jürgen
 
Vorweg: Ich habe keinerlei eigene Erfahrung mit Canvas. Aber für dieses Projekt scheint mir SVG ohnehin besser geeignet. Vor allem ist das Speichern und wieder Laden kein Problem - verlustfrei. Bei Canvas ist so ein direktes Speichern meines Wissens nicht möglich. Du musst immer über ein anderes Format gehen, z.B. PNG und dann verlierst Du natürlich die wesentlichen Informationen, die für ein späteres Bearbeiten wichtig wären.

Vielleicht wäre ja ein Online SVG-Editor eine gute Grundlage für Dich. Soetwas wie SVG Edit müsste sich eigentlich für Deine Zwecke anpassen lassen. Hier kannst Du die aktuelle Version live anschauen: https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

Sag mal am Ende, für was Du Dich am Ende entschieden hast... Ich habe auch immer mal wieder Anforderungen, Grafik-Dateien online zu bearbeiten und wäre daher an Berichten interessiert.
 
Hi

danke für eure Tips. Ich muss mich in beide wohl erst einmal einlesen und schauen inwiefern ich mit möglichst wenig Aufwand zum Ziel komme. Das Ganze habe ich mir wohl etwas einfach unkomplizierter vorgestellt als es ist. Auf den ersten Blick scheint mir svgedit wirklich gut zu passen, hängt natürlich davon ab, wie leicht es sich an meine Bedürfnisse anpassen lässt.
Ich melde mich sobald ich etwas erreicht habe, kann aber durchaus etwas dauern.

Danke in der Zwischenzeit!
 
Moin

@SolarCatcher das Rennen hat jetzt zwibbler.com gemacht. Ist nicht das Günstigste aber erfüllt genau die Anforderungen, die ich brauche.

gruß
martin
 
Zurück
Oben