PHP –– Image Processing –– part 3
written by: admin
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.
<?php
$im = imagecreatetruecolor(100, 100);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im, 0, 0, $red);
header('Content-type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
?>
$im = imagecreatetruecolor(100, 100);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im, 0, 0, $red);
header('Content-type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
?>
produces:
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.
<?php
$img = ImageCreateTrueColor(255, 255);
$blue = 0;
$red=mt_rand(0,255);
$green=mt_rand(0,255);
while($blue < 256)
{
ImageLine($img, 0, $blue , 255, $blue, ImageColorAllocate($img, $red, $green, $blue));
$blue++;
}
Header("Content-type: image/png");
Imagepng($img);
ImageDestroy($img);
?>
$img = ImageCreateTrueColor(255, 255);
$blue = 0;
$red=mt_rand(0,255);
$green=mt_rand(0,255);
while($blue < 256)
{
ImageLine($img, 0, $blue , 255, $blue, ImageColorAllocate($img, $red, $green, $blue));
$blue++;
}
Header("Content-type: image/png");
Imagepng($img);
ImageDestroy($img);
?>
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
<?php
$x = 200;
$y = 200;
$im = imagecreatetruecolor($x, $y);
$red = imagecolorallocate($im, 255, 0, 0);
$x=0;$y=0;
while ($y < 200) {
imagesetpixel($im, $x, $y, $red);
$x=$x+2;
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');
imagepng($im);
?>
$x = 200;
$y = 200;
$im = imagecreatetruecolor($x, $y);
$red = imagecolorallocate($im, 255, 0, 0);
$x=0;$y=0;
while ($y < 200) {
imagesetpixel($im, $x, $y, $red);
$x=$x+2;
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');
imagepng($im);
?>
produces:
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:
- Setting the alpha will blend one image over another like imagecopymerge and then save the image, thus creating a faded image; not a semi–transparent image.
- You cannot use imagecopymerge to merge a transparent image with a regular image. The transparency effect will be negated everywhere the image overlaps with the transparent image.
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:
or
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:
<?php
$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");
imagepng($image);
?>
$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");
imagepng($image);
?>
produces:
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
<?php
$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);
$dest="test1.png";
imagepng($im,$dest);
?><div style='position:absolute;background-color:orange;'><img src="http://www.animeviews.com/images/pops/gdsample31.png"></div>
$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);
$dest="test1.png";
imagepng($im,$dest);
?><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.
links
- PHP –– Image Processing –– part 1
- PHP –– Image Processing –– part 2
- PHP –– Image Processing –– part 3
- PHP –– Image Processing –– part 4
- PHP –– Image Processing –– part 5
- Hex conversion program
- http://us2.php.net/manual/en/function.imagefilter.php
- Image Manipulation Program for testing purposes. Note: It works best in Firefox. In Opera you will need to set the image history to check if the image is new always ––> Tools ––> Preferences ––> Advanced ––> History ––> Check Images ––> Always. Or go here and set the images expiry to 0. (This is probably easiest and fastest way if you are an Opera user)
TAGS: images, php, fonts