Displaying Multiple GD images

[amatuer_scripter]

Hello Everyone-

 

I want to make a dynamic web page that will create a certain number of boxes depending on input from the user. Because i've just learned about the GD library, i was experimenting by trying to place two images on the same page. Below is my code.

   $image=imagecreate(200,50); 
    $background_color=imagecolorallocate($image,255,255,255);  
    $gray=imagecolorallocate($image,204,204,204);
    ImageFilledRectangle($image,50,0,150,50,$gray);
    header('Content-type: image/png');
    imagepng($image);
    $imagetwo=imagecreate(200,50); 
    $background_color2=imagecolorallocate($imagetwo,255,255,255);  
    $gray2=imagecolorallocate($imagetwo,204,204,204);

    ImageFilledRectangle($imagetwo,50,60,150,110,$gray2);
    header('Content-type: image/png');
    imagepng($imagetwo); 
    imagedestroy($image);
    imagedestroy($imagetwo); 

 

For some reason, only one box will appear. Does anyone know why?

 

My php version: 5.2.5

gd-library is enabled

 

Thanks,

 

Austin

[PFMaBiSmAd]

The only way to place an image on a web page is to use a <img src="..." alt=""> tag for each image - http://w3schools.com/html/html_images.asp

 

You cannot generate and output more than one image at a time. You would need to break your php code into two pieces and reference the filename of each piece in two separate <img tags.

[amatuer_scripter]

So then is it possible to create one image and then place it on the page many times dynamically? Meaning one time its there three times and the next its there ten times? Depending on the user's input?

 

Thank you

 

Austin

[helraizer]

If you want to do it that way though. The solution is relatively straight forward. Both your images are 200 x 50. So create a canvas (imagecreate) that is 400 x 100, then make the two images seperately and imagecopymerge them onto the canvas.

 

something like:

<?php

$im = imagecreate(400,100); // create 400x100 canvas

  $image=imagecreate(200,50); 
    $background_color=imagecolorallocate($image,255,255,255);  
    $gray=imagecolorallocate($image,204,204,204);
    ImageFilledRectangle($image,50,0,150,50,$gray);
        
$imagetwo=imagecreate(200,50); 
    $background_color2=imagecolorallocate($imagetwo,255,255,255);  
    $blue=imagecolorallocate($imagetwo,0,0,254);

    ImageFilledRectangle($imagetwo,50,0,150,50,$blue);

ImageCopyMerge($im, $image, 0,0,0,0,200,50,100);
ImageCopyMerge($im, $imagetwo, 0,52,0,0,200,50,100);
    header('Content-type: image/png');
    imagepng($im); 
    imagepng($im, "img.png");
    imagedestroy($im);
     

?>

 

will output this

 

 

That way you have 2 images in one.

 

Although from what I can make out, that's not exactly what you meant, is it?

 

Sam

[amatuer_scripter]

I think i can work with that. I can simply make as many individual boxes as i want and them merge them on a huge canvas. I read somewhere that when i output images with GD i cant output text the normal way (using echo). Is this true? If it is then i'll just have to do it all in GD, i just wasn't sure.

 

This line:

imagepng($im, "img.png");

Creates a copy of the image as a file, right?

 

 

Thank you very much

 

Austin

[amatuer_scripter]

Here is some code i was working on after helraizer's example.

<?php
  $im = imagecreate(400,400); // create 400x400 canvas


  $yf=50; //initialize y final position
  for ($i=0;$i<2;$i++){ //start a loop, loop should create two gray boxes and store them on same canvas
    $image=imagecreate(50,50); 
    $background_color=imagecolorallocate($image,255,255,255);  
    $gray=imagecolorallocate($image,204,204,204);
    ImageFilledRectangle($image,50,0,100,50,$gray);
    ImageCopyMerge($im, $image, 0,$yf,0,0,50,50,100); //$yf should change the position of the second
    $yf+=50;                                                          //box by 50
  
    }
    header('Content-type: image/png');
    imagepng($im); 
    imagepng($im, "img.png");
    imagedestroy($im);
?>

 

I thought it would do pretty much what helraizer's example did (except they would both be gray boxes), but then i could change the number of times it did it to, say eight, and i would have eight boxes all in a column. However, this does not work.

 

Thanks again

 

Austin

[Barand]

try

 

::img.php::

<?php
    $number = isset($_GET['n']) ? $_GET['n'] : 1;
    $interval = 52;
    
    $im = imagecreate(52,$number * $interval); // create 52x? canvas
    $background_color=imagecolorallocate($im,255,255,255);  
    $black=imagecolorallocate($im,0,0,0);
    $gray=imagecolorallocate($im,204,204,204);  

    for ($yf=0; $yf<$number * $interval; $yf+=$interval){ //start a loop, loop should create N gray boxes and store them on same canvas
        ImageFilledRectangle($im,0,$yf,50,50+$yf,$gray);
        ImageRectangle($im,0,$yf,50,50+$yf,$black);
    }
    header('Content-type: image/png');
    imagepng($im); 
    #imagepng($im, "img.png");
    imagedestroy($im);
?>

 

Place on page with

<img src="img.php?n=2">