Link to home
Start Free TrialLog in
Avatar of SevenAteAnthony
SevenAteAnthonyFlag for United States of America

asked on

Image GD: Add Bars (imagefill) to Image (imagecreatefrompng)

Hi Experts,

Thanks for reading. I'm looking to load an image via imagecreatefrompng as a background for graph creation, and then imagefill to create fill for bar graphs to overlay on top of the image, and in the end output all one image.

The basis of my code is as follows -

$im = @imagecreatefrompng('');

$im = imagecreatetruecolor(10, 100);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im, 0, 0, $red);
header('Content-Type: image/png' );

Open in new window

However, $im is overwriting $im and I'm unsure how to append the images together or how to output the graph onto the background image where I want it. Could you please help me? Thank you.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

In PHP when you have two variables with the same name, they overwrite one another.  You probably need to use different variable names.

Unless you are already an expert in PHP image manipulation, you might find that jpGraph is a better tool than trying to write your own image manipulation.  There is a steep learning curve to PHP image work, and jpGraph may save you a lot of struggle and study.

If you want to go forward with the GD route, here are the things you need.

1. You need a background image.  It can come from a file or from an imagecreate...() function.  It is probably not going to be found at

2. You need a transparent image.  Image transparency can be set by using imagecolorat(), imagecolorsforindex() and imagecolorallocate().

3. You need the math to create the proportional pixel dimensions for the bars on the graph.

4. You need an image of the correct size to make the bars

5. You need to use an imagecopy...() function to merge the color bars onto the transparent image.

You would probably want to make the background image and store it in the server file system so you can use CSS to load it into the appropriate element of the document.
Avatar of jrm213jrm213
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You have already create image resource in line 1. You don't need to re-create one in line 3. So just remove line #3 from your code.
Avatar of SevenAteAnthony


Thank you, @jrm213jrm213. You are a god.