Bilder zusammenfügen - ImageCopyresampled

rollerueckwaerts

Erfahrenes Mitglied
Hallo tutorials.de Community,
Bei dem Versuch einen dynamischen Statusbalken zu erstellen möchte ich mit php
2 Bilder in ein neues Bild zusammenpacken und ausgeben.

Das Script funktioniert solange einwandfrei, solange ich die Zeile am Ende mit ImageCopyresampled auskommentiere.
Denn da ist irgendwo was flasch.

Er gibt dann einfach garnichts mehr aus, auch keine Fehlermeldung.

woran könnte es liegen ?

PHP:
header('Content-type: image/png');

			
$im_100 = ImageCreateFromPNG('image.png'); 
$im_0 = ImageCreateFromPNG('image1.png');


$zahl_aktuell = 60;
$zahl_erreicht = 100;
$pixel_aktuell = imagesx ( $im_100 );
$prozent_voll = $zahl_aktuell / $zahl_erreicht *100 ;

$neuebreite = $prozent_voll/100*$pixel_aktuell;

$width                        =    imagesx ( $im_100 );
$height                       =    imagesy ( $im_100);


$src_x                        =    0;
$src_y                        =    0;
$dst_x						  =    -5;
$dst_y					      =    -5;

$src_width                    =    $neuebreite;
$src_height                   =    $height;


$src_xleer                        =    $neuebreite;
$src_yleer                        =    0;
$dst_xleer					      =    0;
$dst_yleer					      =    -5;
$widthleer =     imagesx ( $im_0 )-6;
$prozentleer = 100-$prozent_voll;
$neuebreiteleer = $prozentleer/100*$widthleer;
$src_heightleer = $neuebreiteleer;
$dst_xleer						  =    $neuebreite;
$src_widthleer = $neuebreiteleer;


$im_destleer                    =    imagecreatetruecolor ($widthleer,$height-10);
$im_dest                    =    imagecreatetruecolor ( $neuebreite, $height-10 );


ImageCopy  ( $im_destleer , $im_0  , $dst_xleer  ,$dst_yleer  , $src_xleer  , $src_yleer  , $src_width  , $height  );
ImageCopy  ( $im_dest , $im_100  , $dst_x  ,$dst_y  , $src_x  , $src_y  , $width  , $height );
imageCopyresampled($im_dest, $im_destleer, $dst_y  , $src_x  , $src_y  , $width  , $height);
imagepng($im_dest); 

die();

Das Script schneidet die Pics so hin das sie zusammengesetzt einen Statusbalken ergeben würden. Doch wie geht das Überlappen?

Hoffe auf nen kleinen Tipp

Lg
Tobi
 
Zuletzt bearbeitet:
Danke für den guten Rat, leider hab ich es nun anders gelöst.

Ich habe nun für biede Bildstücke eine eigene .php Datei angelegt die ich dann mit html einbinde.

Funktioniert auch alles perfekt außer wenn der Statusbalken ganz leer (Bild 1) oder ganz voll ist ( Bild 2) dann tritt wieder ein kleiner schwarzer Balken auf. Bei anderen Füllmengen des Balkens funktionierts tadellos. (Bild 3)

Wie krieg ich den schwarzen Fleck Weg ?

Konnte schon herausfinden das es nur an der statusleer.php liegen kann.
Die Andere produziert im Alleingang keinen schwarzen Balken.

Code:

PHP:
$im_0 = ImageCreateFromPNG('image1.png');

$zahl_aktuell 				= 1;
$zahl_erreicht 				= 100;
$widthleer                  = imagesx ( $im_0 );
$height                     = imagesy ( $im_0);

$prozent_voll = $zahl_aktuell / $zahl_erreicht *100 ;
$prozentleer = 100-$prozent_voll;
$neuebreite = $prozent_voll/100*$widthleer;
$neuebreiteleer = $prozentleer/100*$widthleer;

$src_xleer                        =    0;
$src_yleer                        =    0;
$dst_xleer		         =    0;
$dst_yleer	                 =    -5;

$im_destleer                    =    imagecreatetruecolor ($neuebreiteleer-5,$height-10);

ImageCopy  ( $im_destleer , $im_0  , $dst_xleer  ,$dst_yleer  , $neuebreite  , $src_yleer  , $neuebreiteleer  , $height  );
imagepng($im_destleer); 
die();


Freue mich auf eure Hilfe :)
LG
Tobi
 

Anhänge

  • Bild 6.png
    Bild 6.png
    570 Bytes · Aufrufe: 183
  • Bild 3.png
    Bild 3.png
    1,3 KB · Aufrufe: 184
  • Bild 5.png
    Bild 5.png
    910 Bytes · Aufrufe: 186
Zuletzt bearbeitet:
Wo genau nun das Problem liegt kann ich dir nicht sagen, aber ich rate dir das ganze mit CSS zu lösen.. ist wesentlich performanter und einfacher, weil du den Prozentsatz einfach nur ändern musst und den Rest der Browser macht. Außerdem kannst du den Balken mit JS auch dynamisch verändern.

HTML:
<div style="width: 200px; border: 1px black solid;">
    <div style="background: url(deinvollerbalken.png) no-repeat; width: 50%;"></div>
</div>
Code ist jetzt nicht getestet, aber dürfte dir auf jeden Fall einen Anhaltspunkt geben mit dem du ein wenig rumspielen kannst.

Gruß
Dennis

p.s. falls sich das einer denkt, nein sonst mache ich keine Inlinestyles
 
Zurück