Frage Anzeigen von mehreren dynamisch-erstellten PNGs

[RE666]

Hallo,

ich habe mehrere (mit Imagick) dynamisch-erstelle PNG-Files, die alle funktionieren, wenn ich diese einzeln aufrufe.
Wenn ich jedoch versuche diese gleichzeitig auf einer Seite darzustellen, wird/werden lediglich eine bzw. max. anderthalb der Grafiken geladen.

Woran kann das liegen? Das hängt doch sicherlich in irgendeiner Form mit dem Server zusammen?

Danke und LG

 

[RE666]

Ok, ich habe versucht durch Kommentare evtl. Unklarheiten vorzubeugen.

Meine Class zur Bildgenerierung:

class HoudiniIMG {

  public function __construct($img=''){

    if($img){

      $this->file     = $img;
      $this->filename = pathinfo($this->file,PATHINFO_FILENAME);
      $this->filetype = pathinfo($this->file,PATHINFO_EXTENSION);

      if( $this->filetype == 'svg' ){

        $this->img = new Imagick();
        $this->img->setBackgroundColor(new ImagickPixel('transparent'));
        $this->img->readImageBlob(file_get_contents($this->file));
        $this->img->setImageFormat('png32');

      } elseif( $this->filetype == 'png' ){

        $this->img = new Imagick($this->file);
        $this->img->setBackgroundColor(new ImagickPixel('transparent'));

      }

    }

  }

  public function colorize($hex){

    if( $hex && !is_array($hex) ){
      list($r,$g,$b) = sscanf($hex, "#%02x%02x%02x");
    } else {
      $r = $hex[0];
      $g = $hex[1];
      $b = $hex[2];
    }

      $color = new ImagickPixel("rgb($r,$g,$b)");
    $opacity = new ImagickPixel("rgb(225,225,225,1)");
    $this->img->colorizeImage($color, $opacity);

    return $this;

  }
  public function composite($img2,$offsetX=0,$offsetY=0){

    $this->img->compositeImage($img2, Imagick::COMPOSITE_OVER, $offsetX, $offsetY);

    return $this;

  }
  public function resize($width='0',$height='0'){

    $this->img->resizeImage($width, $height, Imagick::FILTER_LANCZOS, 1);

    return $this;

  }
  public function save($path){

    $this->img->writeImage($path);

    return $this;

  }

}

Und meine img.php auf der die Bilder letztlich generiert werden.

Ab der Zeile // PRODUCT wird es relevant, das andere habe ich nur der Vollständigkeit halber mit gepostet. Wie man sieht erstellt die Datei die Mockup-Files (ändert Farbe und Höhe/Breite), sowieso die Designs auf Basis von SVG-Files - was beides tadellos funktioniert. Jedoch beim letzten, den Produkten, kommt es zu besagten Problemen.

include(dirname(__FILE__).'/lib/inc.php');

$imgPath = URL."/lib/img"; # Konstante der 'base url' meiner Webseite

if( $_GET['type'] ){

    header('Content-Type: image/png');

  // DESIGN
    if( $_GET['type'] == 'design' ){

     $file = "$imgPath/svg/d/{$_GET['dk']}.svg";
        $img = new HoudiniIMG($file);

        // resize image
        if( isset($_GET['width']) ){
            $img->resize($_GET['width']);
        }

        // echo image
        echo $img->img;

    }

    // MOCKUP
    elseif( $_GET['type'] == 'mockup' ){

        $file = "$imgPath/png/m/{$_GET['ik']}.png";
         $img = new HoudiniIMG($file);

        // colorize image
        if( isset($_GET['ick']) ){
            $hex = sfwl('colorHex','color','colorKey',$_GET['ick']);
      # sfwl = 'select from where like' und holt den Hex-Farbcode zum dazugehörigen cK (colorKey) aus der DB
            $img->colorize("#{$hex}");
        }

        // resize image
        if( isset($_GET['width']) ){
         $img->resize($_GET['width']);
        }

        // echo image
        echo $img->img;

    }

  // PRODUCT
  elseif( $_GET['type'] == 'product' ){

        # Der PK (ProductKey) ist ein 10-stelliger String: DDDDDVCCTT
        # D = Design (5-stellig)
        # V = DesignVariation (1-stellig)
        # C = ProductColor (2-stellig)
        # T = ProductType (2-stellig)

        $key = pmaker($_GET['pk']); # zerteilt lediglich den pK in die 'Sub-Keys'

        $dK = $key['d']; // design
        $iK = $key['i']; // itemType
        $cK = $key['c']; // itemColor

        // the size
            $ratio = $_GET['width'] ? ( 800 / $_GET['width'] ) : 1;
            $mSize = $_GET['width'] ?: 800;
            $dSize = 300 / $ratio;
        $offsetX = 250 / $ratio;
        $offsetY = 150 / $ratio;

        // the mockup
        # Die Mockup-Quellbilder sind stets 800x800px
        $mIMG = new HoudiniIMG("$imgPath/png/m/{$iK}.png");

        // resize mockup
            if( isset($_GET['width']) ){
            $mIMG->resize($mSize);
            }

        // the design
        $dIMG = new HoudiniIMG("$imgPath/svg/d/{$dK}.svg");

        // resize design
        $dIMG->resize($dSize);

        // colorize mockup
        if( isset($cK) ){
            $hex = sfwl('colorHex','color','colorKey',$cK);
      # sfwl = 'select from where like' und holt den Hex-Farbcode zum dazugehörigen cK (colorKey) aus der DB
            $mIMG->colorize("#{$hex}");
        }

        // composite
        $mIMG->composite($dIMG->img,$offsetX,$offsetY);

        // echo image
        echo $mIMG->img;

  }

}

Und hier noch der entsprechende Ausschnitt der .htaccess:

# IMG: DESIGN
RewriteRule ^lib/img/design/([a-z0-9]+).([0-9]+).png$                   img.php?type=design&dk=$1&width=$2
RewriteRule ^lib/img/design/([a-z0-9]+).png$                            img.php?type=design&dk=$1

# IMG: MOCKUP
RewriteRule ^lib/img/mockup/([a-z0-9]{2}).([a-z0-9]{2}).([0-9]+).png$   img.php?type=mockup&ik=$1&ick=$2&width=$3
RewriteRule ^lib/img/mockup/([a-z0-9]{2}).([a-z0-9]{2}).png$            img.php?type=mockup&ik=$1&ick=$2

# IMG: PRODUCT
RewriteRule ^lib/img/product/([a-z0-9]{10}).([0-9]+).png$               img.php?type=product&pk=$1&width=$2
RewriteRule ^lib/img/product/([a-z0-9]{10}).png$                        img.php?type=product&pk=$1

Und zu guter letzt noch ein Beispiel des HTML-Codes, wie er letztlich auf der Webseite für den Besucher zu finden ist:

<div class="products">
  <article id="p_xxxx1xxxxxx" class="product fadeIn" data-pk="xxxx1xxxxxx" data-dk="xxxx1">
    <div class="thumb">
      <a href="https://domain.tld/-xxxx1xxxxxx/" title="" target="">
        <img id="" src="https://domain.tld/lib/img/product/xxxx1xxxxxx.300.png" alt="">
      </a>
    </div>
  </article>
  <article id="p_xxxx2xxxxxx" class="product fadeIn" data-pk="xxxx2xxxxxx" data-dk="xxxx2">
    <div class="thumb">
      <a href="https://domain.tld/-xxxx2xxxxxx/" title="" target="">
        <img id="" src="https://domain.tld/lib/img/product/xxxx2xxxxxx.300.png" alt="">
      </a>
    </div>
  </article>
  <article id="p_xxxx3xxxxxx" class="product fadeIn" data-pk="xxxx3xxxxxx" data-dk="xxxx3">
    <div class="thumb">
      <a href="https://domain.tld/-xxxx3xxxxxx/" title="" target="">
        <img id="" src="https://domain.tld/lib/img/product/xxxx3xxxxxx.300.png" alt="">
      </a>
    </div>
  </article>
</div>

P.S.: Ich hatte ursprüngl. garkeinen Code gepostet, weil ich davon ausging, dass es sich vielleicht um 'ne grundsätzliche Sache mit der dynamischen Generierung von PNGs handelt, die garnicht explizit was mit meinem Code zu tun hat.