Grafik dynamisch mit JS laden

[emefge]

Hallo Forum,

die Angelegenheit klingt einfach - ich weiss aber noch nicht, wie ich das Ganze angehen kann.

Bisher habe ich meine Bilder in etwa so geladen:
<img src="http://.....loadimg.php?imgid=999999fanjfg&size=thumb" style="width: 100px; height: 100px; margin-left: -32px;">

Das Programm liest die Informationen aus einer Datenbank, öffnet die wirkliche Grafikdatei und gibt sie aus.
Da die Datei in diesem Fall viel breiter als die 100px ist, wird es zentriert dargestellt.

Soweit kein Problem...
Jetzt möchte ich das Layout der Seite aber einfach und nur per Klassen / CSS ändern. Was vorher zeilenweise ist wird jetzt als Karten angezeigt (drei nebeneinander, ...) und anders herum.
Ich ändere also die Klasse des Listen-Containers einfach von 'Listview' auf 'Cardview' und sofort ist das Layout so wie gewünscht (kein reload)... bis auf die Bilder.
Die Bilder sind jetzt immer noch 100 x 100.
Meine Idee: Ich setze den src einfach auf ein Javascript.
<img src="js_loadimg();">
Die JS-Funtion kennt nun die gewünschte Größe des Bildes und ruft das Bild mit diesen Informationen per Ajax oder per socket.io (http://.....loadimg.php?imgid=999999fanjfg&size=999x999) ab, erhält den Grafikinhalt sowie weitere Informationen (z.B. margin) und zeigt es an.

Geht so etwas überhaupt? erhaltene Grafikinhalte per JavaScript anzeigen? Denke ich zu kompliziert?

Mein Wunsch ist es einfach, durch eine einfache Routine das gewünschte Bild je nach Layout (Klasse) anzuzeigen. Der Wechsel der Klasse soll das auslösen.

Bernd

Hat sich erledigt...
Jetzt da ich den Artikel geschrieben habe, habe ich eingesehen, dass dieser Weg nicht wirklich der richtige ist. Ich werde mir etwas Einfacheres einfallen lassen. Interessant wäre es aber dennoch, ob man per JS den Inhalt einer Grafikdatei (Binärdaten) anzeigen kann. Mit canvas soll es kein Problem sein... habe ich noch nicht ausprobiert.

 

[kkapsner]

Meine Idee: Ich setze den src einfach auf ein Javascript.

Das funktioniert so nicht.

Es gibt jetzt drei Möglichkeiten:

Entweder du schreibst in das HTML pro Bild zwei <img> rein (einges für jede Darstellung) und versteckst immer eines in Abhängigkeit von der Klasse des Listen-Containers. Hat den Vorteil, dass du kein extra JS brauchst und dass gleich beim Wechsel die Bilder angezeigt werden. Nachteil ist, dass immer alle Bilder geladen werden.

Die zweite Möglichkeit ist, dass du in dem JS, das den Wechsel der CSS-Klasse ausführt, auch durch alle <img> durchgehst und dann das src (und alle CSS-Attribute) entsprechend setzt. Nachteil ist hier, dass die Bilder nach dem Wechsel erst noch geladen werden müssen, was wahrscheinlich nicht besonders gut aussieht.

Der dritte Weg ist, dass du immer das Größere der beiden Bilder lädst und mit geschickter HTML-Struktur und CSS das Bild dann für die kleinere Ansicht entsprechend zuschneidest und verkleinerst.

PS: Bildbinärdaten mit einem Canvas zu schreiben ist eher nervig, da du zuerst das Bildformat interpretieren musst. Einfacher ist es, aus der Grafikdatei eine Data-URL zu machen und diese dann in das src-Attribut eines <img> zu schreiben.