Bild bearbeiten - clientseitig

[Steve]

Hallo,

ich möchte sekündlich ein Reihe von Bildern bewegen.

Deswegen suche ich eine Möglichkeit, in ein geladenes Bild eine Grafik einzubauen, um die Zahl gering halten.

Meine Ideen:

Wenn ich die Grafiken als div über das Bild lege erhöht sich die Anzahl - das will ja gerade verhindern.

Das serverseitige Bearbeiten geht mir nicht schnell genug und erzeugt zu viel Traffic (wobei ich zur Not mit dem Traffic leben könnte).

Das einzige was mir dann noch einfällt, ist das Gruppieren der div-Grafiken, damit ich nicht alle einzeln bewegen muss. Aber das ist auch eher eine Notlösung.

Ich bin für jede Idee dankbar und natürlich neugierig, was euch so einfällt.

Steve

[ritschmanhard]

Hi Steve!

So ganz klar wird mir nicht, was du machen willst:
1. Bild bearbeiten (lt. Thread Titel): Dafür würde ich dir SVG empfehlen (Tutorial - http://svglbc.datenverdrahten.de)

2. Bild animieren: Dafür empfehle ich dir animated GIFs (meine Empfehlung - http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Editors/GIF-Construction-Set-Pro.shtml)

3. Bilder als Sequenz laden/zeigen: Dann sind http://de.selfhtml.org/javascript/objekte/images.htm#src und/oder "bild vorladen" bei google deine Anlaufstelle.

Ich hoffe, ich konnte dir helfen.

Grüsse,
Richard

[Steve]

Hi ritschmanhard,

danke für die Antwort.

So ganz klar wird mir nicht, was du machen willst:

1. Bild bearbeiten (lt. Thread Titel): Dafür würde ich dir SVG empfehlen (Tutorial - http://svglbc.datenverdrahten.de)

Das trifft es am ehesten (Sieht sehr interessant aus. Das muss ich mir bei Gelegenheit mal genauer anschauen), ist aber nicht das, was ich suche. Soviel ich gesehen habe, muss ich da neue Grafik-Objekte einfügen, wenn ich etwas zeichnen will. Ich suche aber etwas, womit ich in Bilder (<img...>) "hineinzeichnen" kann ohne neue Objekte erzeugen zu müssen.

Ich kann zeichnen sogar noch etwas eingrenzen. Ich möchte in ein Bild eine fertige Grafik einbauen (z.B. aus einer Datei, zur Not auch Pixel für Pixel). Ich möchte den content eines Bildes ändern. Ich such quasi eine Methode, mit der ich die Pixel eines Bildes ändern kann. Ich weiß nicht, wie ich es anders erklären soll. Aber ich werde es nochmal probieren, wenn es noch unklar ist.

vg, Steve

[Der Martin]

Hallo Steve,

Ich möchte in ein Bild eine fertige Grafik einbauen (z.B. aus einer Datei, zur Not auch Pixel für Pixel).

geht es dir dabei wirklich um das Verändern der ursprünglichen Bilddaten? Denn wenn du nur den optischen Effekt brauchst, würde es ja genügen, ein neues kleines Bild einem größeren zu überlagern, sozusagen darüberzulegen. Mit absoluter Positionierung und geeignetem z-Index dürfte dieses "Draufpappen" recht einfach gehen.

Ich such quasi eine Methode, mit der ich die Pixel eines Bildes ändern kann.

Solange du das dabei entstehende neue Bild nirgends speichern willst, genügt doch die Illusion, die durch das Überlagern entsteht, oder nicht? Vor allem dann, wenn das Overlay-Bild noch transparente Bereiche hat, so dass es nicht streng rechteckig aussieht wie eine draufgeklebte Briefmarke.

So long,
 Martin

[Steve]

Hi Martin,

geht es dir dabei wirklich um das Verändern der ursprünglichen Bilddaten?

Ja genau, darum geht es mir.

Im Moment erstelle ich ein neues div und platziere es entsprechend über dem Bild. Damit habe ich keine Probleme.

Im Zuge der Optimierung (Ich habe erwähnt, dass ich sekündlich die ganzen Bilder neu Positionieren will) möchte ich die Anzahl der zu bewegenden Html-Objekte verringern. Da schien es mir am "einfachsten", wenn ich die Bilddaten direkt verändere. Neugierig - sprich ob das überhaupt geht -  bin ich sowieso :)

Solange du das dabei entstehende neue Bild nirgends speichern willst, genügt doch die Illusion, die durch das Überlagern entsteht, oder nicht?

Ich möchte es nicht speichern, aber ich möchte auch keinen neuen Html-Objekte einfügen. Zumindest ist das fürs erste mein Ziel.

Wieso ich optimieren will:
Sekündlich werden ~100 Bilder mit bis zu 100 kleinen grafischen Überlagerungen (zur Zeit als div) bewegt.

Wie schon gesagt, kann ich das vermutlich auf das Bewegen der rund 100 Bilder (je als div) mit den grafischen Überlagerungen darin verringern. Sprich ich bewege nur Bild_1 bis Bild_n.

<div id="Bild_1">
  <img ..>
  <div id="Grafik_1">..
  ...
  <div id="Grafik_n">..
</div>
...
<div id="Bild_n">
  <img ..>
  <div id="Grafik_1">..
  ...
  <div id="Grafik_n">..
</div>