Ok, thought I would jot down some notes from a little project I did a while back.

 

In an ecommerce site, especially clothing, there is often more than one color related to a product. Sometimes showing images of all the different colours is impractical. This is what a colour swatch is for.

 

Heres an example from M&S: http://www.marksandspencer.com/gp/browse.h...=A2BO0OYVBKIQJM

 

So what do you need to make a swatch?

[*]PHP 4 / 5

[*]GD library

 

So really, the first stage is to figure out what variables we want to take in... Heres the obvious one: the colour

 

Now, also width and height... and for a special twist, border colour

 

So here we start the script by assigning defaults:

<?php
$main_color 	= $_GET['c'];
if(!isset($_GET['c'])) {
	$main_color	= "FFFFFF";
}
$width	= $_GET['w'];
if(!isset($_GET['w'])) {
	$width = "15";
}
$height	= $_GET['h'];
if(!isset($_GET['h'])) {
	$height = "15";
}
$brdr_colour	= $_GET['b'];
if(!isset($_GET['b'])) {
	$brdr_color = "000000";
}

 

So far... it does nothing. In fact it will generate an error because i didnt put the ending tag on. But what it does do is set up defaults for if you don't call anything. In this case it will (eventually) make a 15x15 white sqaure with a black border.

 

So now we can move onto the meat of the matter: making an image! Next stage is like so:

$image	= imagecreate( $width, $height );

 

Next thing is colours... but wait! *dramatic music here* We need RGB colours, and I have provided HEX!!! So lets get converting:

$mc_red	=	hexdec(substr($main_color, 0, 2));
$mc_green	=	hexdec(substr($main_color, 2, 2));
$mc_blue	=	hexdec(substr($main_color, 4, 2));

 

Simple eh? we substr to get each 2-bit component of the HEX code (RR)(GG)(BB) and then use hexdec to convert it into a decimal. As such 44 will convert into 64 and FF will convert to 255. nifty eh?

 

So we have an image, and we have a colour. But we dont actually have a colour. We need to allocate it:

$main_color	= imagecolorallocate( $image, $mc_red, $mc_green, $mc_blue );
$brdr_color	= imagecolorallocate( $image, $bc_red, $bc_green, $bc_blue );

 

Ok, so we now have a correctly sized image, two colours (border + bg) and all that is left is to draw the image.

 

First we fill the image with the border color. We could draw four lines, but this is much quicker.

imagefill( $image, 0, 0, $brdr_color );

 

And next draw the main colour over this.

imagefilledrectangle( $image, 1, 1, ($width - 2), ($height-2), $main_color);

 

And finally we need to output the image to browser, in PNG (or other desired) format:

imagepng($image);
imagedestroy($image);

 

imagepng outputs it,

imagedestroy removes it from memory (stops the system getting clogged up).

 

So here is the final thing:

<?php
$main_color 	= $_GET['c'];
if(!isset($_GET['c'])) {
	$main_color	= "FFFFFF";
}
$width	= $_GET['w'];
if(!isset($_GET['w'])) {
	$width = "15";
}
$height	= $_GET['h'];
if(!isset($_GET['h'])) {
	$height = "15";
}
$brdr_color	= $_GET['b'];
if(!isset($_GET['b'])) {
	$brdr_color = "000000";
}

$mc_red	=	hexdec(substr($main_color, 0, 2));
$mc_green	=	hexdec(substr($main_color, 2, 2));
$mc_blue	=	hexdec(substr($main_color, 4, 2));

$bc_red	=	hexdec(substr($brdr_color, 0, 2));
$bc_green	=	hexdec(substr($brdr_color, 2, 2));
$bc_blue	=	hexdec(substr($brdr_color, 4, 2));

$image	= imagecreate( $width, $height );
$main_color	= imagecolorallocate( $image, $mc_red, $mc_green, $mc_blue );
$brdr_color	= imagecolorallocate( $image, $bc_red, $bc_green, $bc_blue );

imagefill( $image, 0, 0, $brdr_color);
imagefilledrectangle( $image, 1, 1, ($width-2), ($height-2), $main_color);

imagepng($image);
imagedestroy($image);

 

and heres how you might call it: (after saving it as swatch.php)

<img src="swatch.php?c=20AFFF&b=000000" />

 

Questions, comments, and so on?

How Fab

 

I'm really pleased with this tutorial, it's not to hard to follow, so thanks for making it easy. I know a use for this already, so that's made my morning, thank you very much.

 

Hey, no problem

 

There are various improvements you can add for this script, such as accepting 3-bit hex codes (eg 0af becomes 00aaff) and taking in keywords (white, black etc), as well as caching the images.

 

However, I will let you figure those ones out

you might want to also do more checks on the GETs like for w and h instead of isset try is_numeric. I don't think anything nasty could be done if it wasn't but I always go on the side of caution

no there is nothing that would go badly, as there is no file access or database access going on.

 

Of course, security is imporant, but I will get out of it with this little thing: "I was writing a tutorial on image creation" ;D

oh I didn't mean for the tutorial. I meant if somebody was going to use it and maybe put extra things in it maybe consider checking the gets. Not like is_numeric instead of isset really makes the code more complex. It wasn't meant as a critism