Ergebnis 1 bis 2 von 2
  1. #1
    emefge ist offline Grünschnabel
    registriert
    25-08-2015
    Beiträge
    2

    Cool Grafik dynamisch mit JS laden

    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.
    Geändert von mikdoe (25-08-2015 um 17:56 Uhr) Grund: Link raus genommen

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Grafik dynamisch mit JS laden

    Zitat Zitat von emefge Beitrag anzeigen
    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.

Ähnliche Themen

  1. [javascript] grafik laden
    Von AnneSK im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 07-12-2007, 17:35
  2. [PHP]Grafik in Grafik laden
    Von Jack dan Son PI im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 16-07-2007, 11:05
  3. Grafik dynamisch anpassen
    Von gerix im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 25-09-2005, 10:25
  4. Antworten: 2
    Letzter Beitrag: 23-07-2005, 22:24
  5. Antworten: 1
    Letzter Beitrag: 19-12-2000, 15:09

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •