May 10, 2009

Apply Rounded Corners to Images On-The-Fly Using PHP and GD Library

The following code sample demonstrates the use of GD library to apply round corners on an image. It allows you to apply round corners of any size and color on a GIF, JPEG or PNG image.

How It Works

The code is written in PHP and requires the presence of GD library. To generate the image on run-time, call the script with appropritate parameters, such as:

  • <img src="images/apply-round-corner.php?source=example.jpg">
  • <img src="images/apply-round-corner.php?source=example.jpg&radius=20">
  • <img src="images/apply-round-corner.php?source=example.jpg&radius=20&colour=ffcc00">
  • <img src="images/apply-round-corner.php?source=http%3A%2F%2Fstatic.php.net%2Fwww.php.net%2Fimages%2Fphp.gif">

There are various techniques to apply round corner effect on an image. I've devised my own method that does not require overlay images or other dependencies. The code generates a mask for the top-right corner by drawing a transparent circle over colored background. This mask is then rotated and superimposed on the specified image four times. Simple and neat.

PHP Code

<?php
/*
 * Apply Round Corner PHP-GD
 * http://salman-w.blogspot.com/2009/05/generate-images-with-round-corners-on.html
 *
 * Adds rounded corners to the specified image
 */

/*
 * source: path or url of a gif/jpeg/png image -- php fopen url wrapper must be enabled if using url
 * radius: corner radius in pixels -- default value is 10
 * colour: corner colour in rgb hex format -- default value is FFFFFF
 */

$source = $_GET["source"];
$radius = isset($_GET["radius"]) ? $_GET["radius"] : 10;
$colour = isset($_GET["colour"]) ? $_GET["colour"] : "FFFFFF";

/*
 * open source image and calculate properties
 */

list($source_width, $source_height, $source_type) = getimagesize($source);
switch ($source_type) {
    case IMAGETYPE_GIF:
        $source_image = imagecreatefromgif($source);
        break;
    case IMAGETYPE_JPEG:
        $source_image = imagecreatefromjpeg($source);
        break;
    case IMAGETYPE_PNG:
        $source_image = imagecreatefrompng($source);
        break;
}

/*
 * create mask for top-left corner in memory
 */

$corner_image = imagecreatetruecolor(
    $radius,
    $radius
);

$clear_colour = imagecolorallocate(
    $corner_image,
    0,
    0,
    0
);

$solid_colour = imagecolorallocate(
    $corner_image,
    hexdec(substr($colour, 0, 2)),
    hexdec(substr($colour, 2, 2)),
    hexdec(substr($colour, 4, 2))
);

imagecolortransparent(
    $corner_image,
    $clear_colour
);

imagefill(
    $corner_image,
    0,
    0,
    $solid_colour
);

imagefilledellipse(
    $corner_image,
    $radius,
    $radius,
    $radius * 2,
    $radius * 2,
    $clear_colour
);

/*
 * render the top-left, bottom-left, bottom-right, top-right corners by rotating and copying the mask
 */

imagecopymerge(
    $source_image,
    $corner_image,
    0,
    0,
    0,
    0,
    $radius,
    $radius,
    100
);

$corner_image = imagerotate($corner_image, 90, 0);

imagecopymerge(
    $source_image,
    $corner_image,
    0,
    $source_height - $radius,
    0,
    0,
    $radius,
    $radius,
    100
);

$corner_image = imagerotate($corner_image, 90, 0);

imagecopymerge(
    $source_image,
    $corner_image,
    $source_width - $radius,
    $source_height - $radius,
    0,
    0,
    $radius,
    $radius,
    100
);

$corner_image = imagerotate($corner_image, 90, 0);

imagecopymerge(
    $source_image,
    $corner_image,
    $source_width - $radius,
    0,
    0,
    0,
    $radius,
    $radius,
    100
);

/*
 * output the image -- revise this step according to your needs
 */

header("Content-type: image/png");
imagepng($source_image);
?>

With the help of this script there is no further need to use Photoshop or GIMP to apply round corner on images. You can revise the parameters of the script to match the color scheme of your website any time.

Example Output

20px White Corners

Round Corner Example 1: 20px White

40px White Corners

Round Corner Example 2: 40px White

Notes

Please note that this example does not contain any validation and error handling. Please add if necessary. Also you might consider caching the generated images on the server or in the browser. Browser caching is simpler to implement and you can do this by sending the Expires header along with the image.

Update

This code sample was revised on July 1, 2009. Earlier version of script produced images with round corners of uneven size. This has been fixed.