Cropping an image into Hexagon shape in a web page - php

Question

I have an image in a web page. I want to convert the four-sided image into a six-sided one. i.e. Crop the edges and convert the image into an hexagon shape.
How can I do it using PHP ImageMagick/GD on my server side. I am using XAMPP server to build a sample web page. Or is there a better way to do it using Javascript/CSS by making use of img style attributes.

Answer 1

It'll be less painful in CSS (you don't even need JS on this).
see this Fiddle http://jsfiddle.net/kizu/bhGn4/

Answer 2

Since I needed to use multiple sizes and caching I needed it in php (well, server-side:)) :
// doge.jpg is a squared pic
$raw = imagecreatefromjpeg('doge.jpg');
/* Simple math here
A_____F
/ \
B/ \E
\ /
C\_____/D
*/
$w = imagesx($raw);
$points = array(
.25 * $w, .067 * $w, // A
0, .5 * $w, // B
.25 * $w, .933 * $w, // C
.75 * $w, .933 * $w, // D
$w, .5 * $w, // E
.75 * $w, .067 * $w // F
);
// Create the mask
$mask = imagecreatetruecolor($w, $w);
imagefilledpolygon($mask, $points, 6, imagecolorallocate($mask, 255, 0, 0));
// Create the new image with a transparent bg
$image = imagecreatetruecolor($w, $w);
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagealphablending($image, false);
imagesavealpha($image, true);
imagefill($image, 0, 0, $transparent);
// Iterate over the mask's pixels, only copy them when its red.
// Note that you could have semi-transparent colors by simply using the mask's
// red channel as the original color's alpha.
for($x = 0; $x < $w; $x++) {
for ($y=0; $y < $w; $y++) {
$m = imagecolorsforindex($mask, imagecolorat($mask, $x, $y));
if($m['red']) {
$color = imagecolorsforindex($raw, imagecolorat($raw, $x, $y));
imagesetpixel($image, $x, $y, imagecolorallocatealpha($image,
$color['red'], $color['green'],
$color['blue'], $color['alpha']));
}
}
}
// Display the result
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
You should get something similar to this:

Answer 3

You can use HTML5 canvas to mask the edges and then read out the image using a Data URI.
Also be aware that for this technique to work, you'll have to proxy the image to your domain, since Canvas marks its contents dirty if an image is loaded from a foreign domain.
UPDATE: I've added a jsfiddle that demonstrates this technique.