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

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

  • By
    MooTools HTML Police: dwMarkupMarine

    We've all inherited rubbish websites from webmasters that couldn't master valid HTML. You know the horrid markup: paragraph tags with align attributes and body tags with background attributes. It's almost a sin what they do. That's where dwMarkupMarine comes in.

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!