PHP Tutorial: Dynamically Colored Images, Overlays & Transparencies
So this one isn’t really a tutorial but it gives you a good idea how you’d go about changing the colors of pictures dynamically. To get the big picture on how you might use this try a working version that I created loosely based off the script below. This works great for changing the color of pets/items, etc without having to make 3 gazillion copies of them and spend hours in a graphic program like Photoshop. Instead you create an array of hex colors, slap a loop around this script and voila, you now have your item in the 10 different colors of your choosing. You have to have PHP compiled with GD support to run this script.
<?php
/*************
* Filename: index.php
* Purpose: change the base color of an image
* Author: design1online.com | games for girls
*************/
//fix the IE problems of not reloading the newest version of the image
header("Expires: Mon, 14 Jul 1789 12:30:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
//The files must be .pngs with transparent backgrounds
//The .png file itself must be saved in INDEXED color mode otherwise this won't work
$basecolor = 'basecolor.png'; //color of the horses coat, must be an all white image for colors to display properly
$outline = 'lines.png'; //outline of the horse
$percent = 0.75; //percentage to scale the image up or down 1 = 100%, 0.5 = 50% smaller, etc
$id = 123; //id of the picture you're creating -- usually this would correspond to the key of the record
$destfile = 'horse' . $id .'.jpg'; //creates a picture of this horse under this id number
// Get new dimensions
list($width, $height) = getimagesize($basecolor);
$new_width = $width * $percent;
$new_height = $height * $percent;
//the color we want to change it to
$htmlcolor = $_POST['htmlcolor'];
if (!$htmlcolor) //default color
$htmlcolor = cccccc; //gray
//break the color into its RGB values
$red = hexdec(substr($htmlcolor, 0, 2));
$green = hexdec(substr($htmlcolor, 2, 2));
$blue = hexdec(substr($htmlcolor, 4, 2));
//for your reference
echo "Color is: $red | $green | $blue<br>";
//load the image you're going to change the color of
$image_p = @imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefrompng($basecolor);
imagecolorset($image, 0, $red, $green, $blue);
imagealphablending($image_p, false);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagesavealpha($image_p, true);
//recreate the image, overlaying the outline on the colored base
$image = imagecreatefrompng($outline);
imagealphablending($image_p, true);
imagesavealpha($image_p, true);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
//create the .png image and you're done
imagepng($image_p, $destfile);
//form so you can change from color to color with the push of a button
echo "<form action="index.php?id=" . rand() . "" method="post">";
echo "<center>";
echo "<img src="$destfile?fool="; //this is so older versions of IE won't cache the image
print md5(time());
echo "HTML color code: <input type="text" name="htmlcolor" value="". $_POST['htmlcolor'] . "" >";
echo "<br />";
echo "<input type="submit" name="submit" value="Change Color" ><br />";
echo "</center>";
echo "</form>";
?>
Download the two images I used for this script basecolor.png (will look blank when you click on the link because this is a white image) and lines.png, right click on the links and save as. Simply put them in the same place as this .php file, run the file and watch the magic happen.
Hi,
Why don’t you add a DEMO for this example?
Did you see the link to the working version? Or are you referring to a .zip with a copy of the working files?
I always wondered how to do this! 🙂 Thank you.
However, I am having trouble changing the image mode into a Indexed image. What settings does it need to be? Such as the palette and forced settings.I am using Adobe Photoshop.
When you go to save the base image in photoshop you need to change it to Indexed mode then select WEB from the drop down list of options.