Your website design may include images with rounded corners – products, product thumbnails, team photos, customer logos … well, you get the idea. Because the corners are rounded, you had to crop, scale and round the corners using Photoshop, then upload them into your website. Now, with Jcrop, you can not only crop and scale inside your CMS (like WordPress, for example), but apply templated rounded corners so you don’t have to even think about it anymore – the corners are rounded automatically – it’s super easy and your images are all consistent.
See the quick demo here:
See the full demo here:
From a technical standpoint, the solution is really simple and is integrated with the Jcrop plugin that we discussed previously. The good thing about our solution is that you can see the resulting image with rounded edges before you publish it.
So, here’s the technical solution and some script to play with:
We pass the rounded corners parameters to the script: the radius and the background color of the corners.
The script works as follows:
1. Creates a transparent image 3 times larger than the cropped image (which is ready by this time).
2. Draws 4 90°arches in each of the 4 corners of the image. Those arches serve to produce rounded corners.
3. Fills the rounded corners with the background color passed to the script as a parameter.
4. Reduces the image size 3 times – this helps achieve the anti-aliasing effect.
5. Places the cropped image onto the image the script created.
Another important aspect of the feature is the preview of the image with rounded corners which is available before the page is saved. Here’s how it was done:
1. On the admin panel page where you upload and crop the image we add a div. As the background for this div we use the dynamically generated image with rounded corners and transparent center (we use the image that we receive as a result of points 1-3 – see above).
2. Over this div we place the resulting cropped image. So, in reality we see 2 images at the same time: the cropped image with right angles and the transparent image with rounded corners over it. In other words, we save resources and time by using the mask. Here’s how the mask is created:
$im_temp = imagecreatetruecolor($thumb_width*3,$thumb_height*3);
$black = imagecolorallocate($im_temp, 0, 0, 0);
imagecolortransparent($im_temp, $black);
$bg = imagecolorallocate($im_temp, hexdec(substr($backcolor,0,2)),
hexdec(substr($backcolor,2,2)),hexdec(substr($backcolor,4,2)));
$arcsize = $corner_radius*6;
imagearc($im_temp, $corner_radius*3,
$corner_radius*3, $arcsize, $arcsize, 180,270,$bg);
imagefilltoborder($im_temp,0,0,$bg,$bg);
imagearc($im_temp, ($thumb_width-$corner_radius)*3,
$corner_radius*3, $arcsize, $arcsize, 270,360,$bg);
imagefilltoborder($im_temp,$thumb_width*3,0,$bg,$bg);
imagearc($im_temp, ($thumb_width-$corner_radius)*3,
($thumb_height-$corner_radius)*3, $arcsize, $arcsize, 0,90,$bg);
imagefilltoborder($im_temp,$thumb_width*3,$thumb_height*3,$bg,$bg);
imagearc($im_temp, $corner_radius*3, ($thumb_height-$corner_radius)*3,
$arcsize, $arcsize, 90,180,$bg);
imagefilltoborder($im_temp,0,$thumb_height*3,$bg,$bg);
$im_temp1 = imagecreatetruecolor($thumb_width,$thumb_height);
$black1 = imagecolorallocate($im_temp1, 0, 0, 0);
imagecolortransparent($im_temp1, $black1);
imagecopyresampled($im_temp1, $im_temp, 0, 0, 0, 0,
$thumb_width,$thumb_height,$thumb_width*3, $thumb_height*3);
header("Content-type: image/png");
imagepng($im_temp1);
imagedestroy($im_temp1);
imagedestroy($im_temp);
This is just one way of handling this particular issue (rounded images), and there are lots of other ways of formatting and templating how images appear by using Jcrop.
Do you have a clever script for handling images inside your CMS? We’d love to know about it!