▼  Site Navigation Main Articles Search  ▼  Anime + Manga Anime Reviews Anime Characters Gallery Screenshots Manga Reviews  ▼  Misc News Links to Webcomics Bible Quotes About Older Musings
site version 7.3
PHP –– Image Processing –– part 3
written by: admin

Date Written: 9/20/09 Last Updated: 9/12/12

Intro: In part 2 we looked at ways that an image could be manipulated using imgfilter.  In this part we will look at creating images.

create a box
To start we will create a box using a slightly modified script from php.net.
$im = imagecreatetruecolor(100, 100);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im, 0, 0, $red);
header('Content-type: image/jpeg');


With this we can create squares and rectangles of different dimensions and colors, but let's see if we can do something a little more interesting.

Gradient images

I love this code.  It is simple and generates a random gradient image of fixed size, but the colors are always different every time you refresh the image.  It is in png format to give you the best image quality.  Png for images is rather high, but for calculated images like this the image size is quite small even compared to the small filesize of jpgs, while at the same time retaining a much higher image quality.
$img = ImageCreateTrueColor(255, 255);
$blue = 0;
while($blue < 256)
    ImageLine($img, 0, $blue , 255, $blue, ImageColorAllocate($img, $red, $green, $blue));
Header("Content-type: image/png");

These are a few of the images that were produced after running the script.  As you can see, the images are gradient and pretty random.

Change both "100" values in the script to change the width.  The "blue" determines how long vertically the image will be.  The image begins with a blue value of 0 at the top and each successively line that is generated downwards will increase the blue value by one for a total of 255 lines.  A value of 256 is the same as a value of 0.  The image values cycle that way, so 255, 510, and 765 are all the same value.

Image Transparency
$x = 200;
$y = 200;
$im = imagecreatetruecolor($x, $y);
$red = imagecolorallocate($im, 255, 0, 0);

while ($y < 200) {
imagesetpixel($im, $x, $y, $red);
if ($x>=200) {$y=$y+2;$x=0;}
if ($y>=200) break;
$black = imagecolorallocate($im, 0, 0, 0);
imagecolortransparent($im, $black);

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


This was really hard to create.  It is a black square 200px by 200px.  I set the black background to transparent using imagecolortransparent() and then used imagesetpixel to generate a red pixel at every even spot.  For example I placed one pixel at 0,0 then another at 2,0 and another at 4,0, etc and then do the same on the next line till the image was filled with dots.  This gives the image a 50% transparency.  In theory this could be done with pictures.  The opacity can also be set by setting the transparent pixels further apart or closer together.

Here is what won't work:  A better option would be to generate the image using some sort of photoshop program on your computer.

Another, much simpler solution, is to use CSS
<img src='images/screenshots/cowboybebop27.JPG' style='opacity:0.4;filter:alpha(opacity=40)'>
This will produce:


which, as you can see, is much nicer, simpler, and preferable.

I do want to note that imagecolortransparent() could be used for certain images to make portions of the image transparent.  Most images are within square borders.  The images are framed even if the picture is of a ball.  Most people are not interested, but if you wanted you could display the ball without having a background image.  For example:

$image = imagecreatetruecolor(400, 300);
$bg = imagecolorallocate($image, 0, 0, 0);
imagefilledrectangle($image, 0, 0, 400, 300, $bg);
$col_ellipse = imagecolorallocate($image, 24, 10, 120);
imagefilledellipse($image, 200, 150, 300, 200, $col_ellipse);
imagecolortransparent($image, $bg);
header("Content-type: image/png");


Notice that in the above image there is no background image.  Well, there is, but it is invisible, so if the above image were placed on top of another image the background image would shine through the place where the top image is invisible.  To see what I am talking about in action try resizing your browser width till the image no longer fits the page and you will see what I am talking about.

convert one color in a png image to transparent
$filename = 'http://www.animeviews.com/images/pops/imperium_logo2.png';
$im = imagecreatefrompng($filename);
imagetruecolortopalette($im, false, 255);
$ig = imagecolorat($im, 0, 0);
imagecolorset($im, $ig, 0, 255, 0);
$ig = imagecolorat($im, 0, 0);
imagecolortransparent($im, $ig);
?><div style='position:absolute;background-color:orange;'><img src="http://www.animeviews.com/images/pops/gdsample31.png"></div>

The above will take a png image, analyze the color at location 0,0 of the image or the top left corner and replace that color throughout the image with the color green, reanalyze the color at the top left corner and change the green to transparent, save the image at 'test1.png' and then display that newly created image with an orange background.

Note: imagepng($im,$dest, 84); will only create an error message at best since the image quality is 100% by default.  84 is a number that states the quality of an image and that only pertains to jpg images.


TAGS: images, php, fonts
copyright 2005–2021