Smartcrop.js implements an algorithm to find good crops for images.
- Test Suite, contains over 100 images, heavy
- Test Bed, allows you to upload your own images
- Photo transitions, automatically creates Ken Burns transitions for a slide show.
Smartcrop.js works using fairly dumb image processing. In short:
- Find edges using laplace
- Find regions with a color like skin
- Find regions high in saturation
- Generate a set of candidate crops using a sliding window
- Rank them using an importance function to focus the detail in the center and avoid it in the edges.
- Output the candidate crop with the highest rank
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
// {topCrop: {x: 300, y: 200, height: 200, width: 200}}npm install smartcrop
or
bower install smartcrop
or just download smartcrop.js from the git repo.
The smartcrop-cli offers command line interface to smartcrop.js. It is based on node.js and node-canvas. You can also view it as an example on how to use smartcrop.js from a node.js app.
Supported:
- common js
- amd
- global export / window
The API is not yet finalized. Look at the code for details and expect changes.
Crop image using options and call callback(result) when done.
image: anything ctx.drawImage() accepts, usually HTMLImageElement, HTMLCanvasElement or HTMLVideoElement. Keep in mind that origin policies apply to the image source, and you may not use cross-domain images without CORS.
options: see cropOptions
callback: function(cropResult)
debug: if true, cropResults will contain a debugCanvas
minScale: minimal scale of the crop rect, set to 1.0 to prevent smaller than necessary crops (lowers the risk of chopping things off).
width: width of the crop you want to use.
height: height of the crop you want to use.
There are many more (for now undocumented) options available. Check the source and know that they might change in the future.
{
topCrop: crop,
crops: [crop]
}{
x: 1,
y: 1,
width: 1,
height: 1
}You can run the tests using grunt test. Alternatively you can also just run grunt (the default task) and open http://localhost:8000/test/. The test coverage for smartcrop.js is very limited at the moment. I expect to improve this as the code matures and the concepts solidify.
There are benchmarks for both the browser (test/benchmark.html) and node (node test/benchmark-node.js [requires node-canvas]) both powered by benchmark.js.
If you just want some rough numbers: It takes < 100 ms to find a square crop of a 640x427px picture on an i7. In other words, it's fine to run it on one image, it's not cool to run it on an entire gallery on page load.
- connect-thumbs Middleware for connect.js that supports smartcrop.js by Irakli Nadareishvili
- smartcrop.go by Christian Muehlhaeuser
- smartcrop.py by Hideo Hattori
- smartcrop-rails smartcrop wrapped in a ruby gem by Mohammed Sadiq
Copyright (c) 2014 Jonas Wanger, licensed under the MIT License (enclosed)