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 a 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
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.
Copyright (c) 2014 Jonas Wanger, licensed under the MIT License (enclosed)