Focused Image Cropping with smartcrop.js
Images tend to make any page more engaging, especially when done right. The problem is that automating image creation and sizing can be a very difficult task, especially when the image is uploaded by a user -- who knows what format, size, and resolution the image will be. Hell, who knows if they're actually sending you an image for that matter (though validating that they've uploaded an image isn't too difficult).
I recently found out about smartcrop.js, a brilliant JavaScript utility which analyzes the contents of an image and finds the focal point (a face, for example) of any image. It's easy to use and does an outstanding job picking up on the important part of an image.
Check out a few images I put through the smartcrop.js testbed:
I wont bother showing the super simple code sample -- you can view that on the smartcrop.js repo. And be sure to play around on the testbed. I love recognizing developers for their feats and this is some incredible work by Jonas Wagner!
![How to Create a Twitter Card]()
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Link Nudging with CSS3 Animations]()
One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging. I've created this effect with three flavors of JavaScript: MooTools, jQuery, and even the Dojo Toolkit. Luckily CSS3 (almost) allows us to ditch...
![Image Reflections with CSS]()
Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...
Excellent find, thank you.