Focused Image Cropping with smartcrop.js

By  on  

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!

Recent Features

Incredible Demos

  • By
    Add Styles to Console Statements

    I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...

  • By
    Scroll IFRAMEs on iOS

    For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari.  For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...

Discussion

  1. Fred

    Excellent find, thank you.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!