Hi, in my Rails app I want to have a similar profile section like Facebook where uploaded images are automatically thumbnailed and corner-rounded. I'm using the convert utility to downsize images into thumbnails, but is there an option to round their corners too? Thanks.
views:
1276answers:
2
+1
A:
Here are some rounded corners examples: http://www.imagemagick.org/Usage/thumbnails/#rounded_border. You'll need to create a mask of some sort (either by hand or using the drawing tools) and then overlay it onto your image.
Jeremy Stanley
2009-04-05 04:04:54
Are there any jQuery plugins to automagically do this, or is that just wishful thinking?
jamtoday
2009-06-29 06:07:49
This page gives an example of using the jquery corners plugin on an image: http://www.malsup.com/jquery/corner/image.htmlIt's referencing the plugin from here: http://jqueryjs.googlecode.com/svn/trunk/plugins/corner/jquery.corner.js
Jeremy Stanley
2009-06-29 08:00:33
+6
A:
Facebook doesn't modify pictures to have rounded corners. Instead, they use HTML and CSS to apply this image over each user picture: http://www.facebook.com/images/ui/UIRoundedImage.png
If you inspect UIRoundedImage.png, you'll find that each "square" consists of a transparent center, and opaque corners that are meant to match the background on which the user picture will rest. For instance, if the user picture is on a white background, then white opaque rounded corners will be overlaid on the user picture.
The CSS technique for using just a specific part of UIRoundedImage.png is called "CSS sprites". You can read more about it here: http://www.alistapart.com/articles/sprites/
Ron DeVera
2009-04-05 04:32:46