Wednesday, April 28, 2010

Rounded corners using PHP and the GD library

Why GD library?

I needed to add rounded corners to some pictures and didn't want to modify the source files in Photoshop (I think it's a bad idea to modify original pictures if the effect can be added dynamically).
First, I thought CSS would do the trick. But after finding some tutorials on the web (some also use Javascript), I realized that to get it working in most web browsers, it doesn't seem that easy, and it generally means that you have to create a lot of wrapping divs.
That's when I decided to use the GD library, which I had found very useful in other projects. I'm not saying that this solution is perfect or better that others, but it has worked very well for me, and I hope it will be useful to some of you as well. Feel free to contact me if you have any comment about this code.
    Advantages of this solution:
  • Flexible: You can chose which corner to round as well as the radius
  • Cross-browser: Since the rounded corners are applied server-side, there's no need for CSS or Javascript support
  • Clean: no wrapping DIVs
  • The entire image can be rotated and still have rounded corners.
    Known limitations:
  • Depending on your rounded corner image, a black border might be shown when using a radius different from the one in that rounded corner image, because of some transparency issues. Thus, use a corner image with the correct size, if possible.
  • The src attribute must point to the function file, so you have to adapt your HMTL. But anyway, it would be easy to set up some javascript to automatically change the src attribute of the images you want to apply rounded corners to.

PHP code

$_GET['src'];$corner_radius = isset($_GET['radius']) ? $_GET['radius'] : 20// The default corner radius is set to 20px$angle = isset($_GET['angle']) ? $_GET['angle'] : 0// The default angle is set to 0ยบ$topleft = (isset($_GET['topleft']) and $_GET['topleft'] == "no") ? false true// Top-left rounded corner is shown by default$bottomleft = (isset($_GET['bottomleft']) and $_GET['bottomleft'] == "no") ? false true// Bottom-left rounded corner is shown by default$bottomright = (isset($_GET['bottomright']) and $_GET['bottomright'] == "no") ? false true// Bottom-right rounded corner is shown by default$topright = (isset($_GET['topright']) and $_GET['topright'] == "no") ? false true// Top-right rounded corner is shown by default
$images_dir 'images/';$corner_source imagecreatefrompng('images/rounded_corner.png');
$corner_width imagesx($corner_source);  $corner_height imagesy($corner_source);  $corner_resized ImageCreateTrueColor($corner_radius$corner_radius);ImageCopyResampled($corner_resized$corner_source0000$corner_radius$corner_radius$corner_width$corner_height);
$corner_width imagesx($corner_resized);  $corner_height imagesy($corner_resized);  $image imagecreatetruecolor($corner_width$corner_height);  $image imagecreatefromjpeg($images_dir $image_file); // replace filename with $_GET['src'] $size getimagesize($images_dir $image_file); // replace filename with $_GET['src'] $white ImageColorAllocate($image,255,255,255);$black ImageColorAllocate($image,0,0,0);
// Top-left cornerif ($topleft == true) {
$dest_x 0;
$dest_y 0;
// Bottom-left cornerif ($bottomleft == true) {
$dest_x 0;
$dest_y $size[1] - $corner_height;
$rotated imagerotate($corner_resized900);
// Bottom-right cornerif ($bottomright == true) {
$dest_x $size[0] - $corner_width;
$dest_y $size[1] - $corner_height;
$rotated imagerotate($corner_resized1800);
// Top-right cornerif ($topright == true) {
$dest_x $size[0] - $corner_width;
$dest_y 0;
$rotated imagerotate($corner_resized2700);
// Rotate image$image imagerotate($image$angle$white);
// Output final imageimagejpeg($image);
imagedestroy($image);  imagedestroy($corner_source);?>

Here is the screenshot:


How to use it?

Needless to say, PHP and the GD library needs to be installed on your server. You'll also need a png file of the corner. You can use one of our corner images if you want.
Just paste the code above and save it in a php file. Make the necessary changes to the $images_dir and $corner_source variables. Link the src attribute of your image to that file, using the following GET variables:
  • "src": name of the image file
  • "radius" (optionnal): value that represents (in pixels) the radius of the corners (used to resize the corner image)
  • "angle" (optionnal): value that represents (in degrees) the rotation angle
  • "topleft=no" (optionnal): doesn't round the top-left corner
  • "bottomleft=no" (optionnal): doesn't round the bottom-left corner
  • "bottomright=no" (optionnal): doesn't round the bottom-right corner
  • "topright=no" (optionnal): doesn't round the top-right corner
The 3 pictures above have the following src attributes, respectively:
  • src='roundedCorners.php?src=bunny.jpg&radius=40'
  • src='roundedCorners.php?src=bunny.jpg&radius=40&angle=15'
  • src='roundedCorners.php?src=bunny.jpg&radius=40&topleft=no&bottomright=no'



1 comment: