Horster: Bilder für Sprite zusammenfügen (Entwickler hat wütend Büro verl

Hallo,

regelmäßig updaten wir unsere CSS Sprites. Jetzt haben wir einen Bereich der "fast" täglich ein update benötigt. Bisher haben wir das immer händisch gemacht, aus Zeitgründen soll das nun automatisch erfolgen.
Unser Entwickler hat heute Wütend das Büro verlassen, und Wochenende gemacht. Kernaussage "Alles Scheiße". Daher habe ich mich als alter BASIC Fan man das ganze angeschaut.

▲Ausgangssituation
Unsere Quelldateien sind glücklicherweise alle genormt mit 60*60 px und haben alle Dateiformat .jpg .
Zum testen haben wir nun zwei Dateien genommen:1.jpg und 2.jpg . Und möchte die nun zu einer Datei zusammenfassen. Die Bilder sollten wie für Sprites üblich untereinander angezeigt werden.

Mein Ansatz:

    header( "Content-Type: image/png");  
  
    $destination = "1.jpg";  
    $source = "2.jpg";  
  
    $image = imagecreatefromjpeg($destination);  
    $insert = imagecreatefromjpeg($source);  
  
    imagecopymerge($image, $insert, 100, 200, 0, 0, 200, 10, 50 );  
  
    ImagePNG($image);

Soweit so gut, das Desination Bild sehe ich auch, aber nichts ist von dem zweiten Bild zu sehen. Ich vermute das Problem liegt in den Angaben von imagecopymerge bin aber wirklich zu sehr Anfänger um das zu verstehen. Vielleicht jemand von euch?

  1. Tach!

    Unsere Quelldateien sind glücklicherweise alle genormt mit 60*60 px und haben alle Dateiformat .jpg .
    Zum testen haben wir nun zwei Dateien genommen:1.jpg und 2.jpg . Und möchte die nun zu einer Datei zusammenfassen. Die Bilder sollten wie für Sprites üblich untereinander angezeigt werden.

    Beide Bilder sind also 60x60?

    $image = imagecreatefromjpeg($destination);
        $insert = imagecreatefromjpeg($source);

    Nun, wenn du dann davon Bildressourcen anlegst, sind die natürlich auch nur 60x60 groß.

    imagecopymerge($image, $insert, 100, 200, 0, 0, 200, 10, 50 );

    Und dann ist die Position x=100 und y=200 außerhalb des Bildes. Oder aber du hast nicht genau beschrieben, was du wirklich vorliegen hast.
    Unabhängig davon sehen ich zwei Möglichkeiten. Nummer 1 aufblasen, damit Platz für 2 entsteht und dann zwei hineinkopieren. Oder ein neues Bild mit ausreichend Platz erschaffen und dann 1 und 2 hineinkopieren.

    Ich vermute das Problem liegt in den Angaben von imagecopymerge bin aber wirklich zu sehr Anfänger um das zu verstehen. Vielleicht jemand von euch?

    Du solltest genauer beschreiben, was du daran nicht verstehst, sonst kann ich dir in dem Punkt nicht helfen.

    dedlfix.

  2. Früher hatte ich auch das Problem doch dank des tollen CSS Sprite Generator ist das erstellen von CSS Sprite Bildern total einfach, selbst für Entwickler!

    Du packst deine Bilder einfach in ein Zip, lädst es beim CSS Geneator hoch und bekommst das Sprite Bild INKLUSIVE fertigem css. Die CSS Sachen heißen wie die bilder (nur ohne die Dateiendung). Sprich wenn du ein stern.jpg bild hast, dann baut dir das der Generator in das Sprite bild ein und die css Klasse heißt dann .stern { "korrdinaten" }. Will heißen, wenn du die css Klassen oder die Bildnamen nicht änderst kannst du das Sprite Image durch den Generator "erweitern" lassen. Erweitern heißt in dem Fall, der baut das neu zusammen aber dank des eindeutigen Klassennamens musst du nix im css ändern, sondern kopierst einfach die erzeugten Klassen in deine css Datei.

    Gruß
    Generation Generator
    T-Rex

    ---------

    Da Weihnachten bald ist, gibt es heute noch eine kleine Anekdote zum Schluss:
    "Einen Döner bitte"
    "Mit Schaf?"
    "Schaf oder Pute, dass ist mir egal!"

    1. Om nah hoo pez nyeetz, T-Rex!

      Es gibt keine CSS-Klassen. Sachen gibts, die gibts gar nicht.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Plan und Plantage.