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!
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![MooTools Font-Size Scroller with Cookie Save]()
Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...
![CSS Vertical Centering]()
Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...
Excellent find, thank you.