Other0.4%
[color=var(--color-fg-default) !important]README.md
[color=var(--color-accent-fg)]smartcrop.js[color=var(--color-accent-fg)]
Smartcrop.js implements an algorithm to find good crops for images. It can be used in the browser, in node or via a CLI.
[color=var(--color-accent-fg) !important]Note I'm currently working on a more advanced version of smartcrop.js based on machine learning. As part of that I'm looking for a large dataset of manually cropped images. If you know of such a dataset, please [color=var(--color-accent-fg)]let me know.
[color=var(--color-accent-fg)]Demos[color=var(--color-accent-fg)]Simple Example[color=var(--color-prettylights-syntax-comment)]// you pass in an image as well as the width & height of the crop you[color=var(--color-prettylights-syntax-comment)]// want to optimize.smartcrop.[color=var(--color-prettylights-syntax-entity)]crop(image, { [color=var(--color-prettylights-syntax-constant)]width: [color=var(--color-prettylights-syntax-constant)]100, [color=var(--color-prettylights-syntax-constant)]height: [color=var(--color-prettylights-syntax-constant)]100 }).[color=var(--color-prettylights-syntax-entity)]then([color=var(--color-prettylights-syntax-keyword)]function(result) { [color=var(--color-prettylights-syntax-storage-modifier-import)]console.[color=var(--color-prettylights-syntax-entity)]log(result);});
Output:
[color=var(--color-prettylights-syntax-comment)]// smartcrop will output you its best guess for a crop[color=var(--color-prettylights-syntax-comment)]// you can now use this data to crop the image.{[color=var(--color-prettylights-syntax-constant)]topCrop: {[color=var(--color-prettylights-syntax-constant)]x: [color=var(--color-prettylights-syntax-constant)]300, [color=var(--color-prettylights-syntax-constant)]y: [color=var(--color-prettylights-syntax-constant)]200, [color=var(--color-prettylights-syntax-constant)]height: [color=var(--color-prettylights-syntax-constant)]200, [color=var(--color-prettylights-syntax-constant)]width: [color=var(--color-prettylights-syntax-constant)]200}}
[color=var(--color-accent-fg)]Download/ Installationnpm install smartcrop or just download [color=var(--color-accent-fg)]
smartcrop.js from the git repository.
Smarcrop requires support for [color=var(--color-accent-fg)]
Promises, use a [color=var(--color-accent-fg)]
polyfill for unsupported browsers or set smartcrop.Promise to your favorite promise implementation (I recommend [color=var(--color-accent-fg)]
bluebird).
If you are interested in using smartcrop.js to crop your images you should also consider to avoid cropping them by using [color=var(--color-accent-fg)]
dont-crop. Dont-crop gives you matching gradients and colors to pad and complement your images.
[color=var(--color-accent-fg)]
The [color=var(--color-accent-fg)]
smartcrop-cli offers command line interface to smartcrop.js.
You can use smartcrop from nodejs via either [color=var(--color-accent-fg)]
smartcrop-gm (which is using image magick via gm) or [color=var(--color-accent-fg)]
smartcrop-sharp (which is using libvips via sharp). The [color=var(--color-accent-fg)]
smartcrop-cli can be used as an example of using smartcrop from node.
While
smartcrop.js is a small personal project it is currently being used on high traffic production sites. It has a basic set of automated tests and a test coverage of close to 100%. The tests run in all modern browsers thanks to [color=var(--color-accent-fg)]
saucelabs. If in any doubt the code is short enough to perform a quick review yourself.
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
- Boost regions as specified by options (for example detected faces)
- 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
[color=var(--color-accent-fg)]Face detectionThe smartcrop algorithm itself is designed to be simple, relatively fast, small and generic.
In many cases it does make sense to add face detection to it to ensure faces get the priority they deserve.
There are multiple javascript libraries which can be easily integrated into smartcrop.js.
On the client side I would recommend using tracking.js because it's small and simple. Opencv.js is compiled from c++ and very heavy (~7.6MB of javascript + 900kb of data). jquery.facedetection has dependency on jquery and from my limited experience seems to perform worse than the others.
On the server side node-opencv can be quicker but comes with some [color=var(--color-accent-fg)]
annoying issues as well.
It's also worth noting that all of these libraries are based on the now dated [color=var(--color-accent-fg)]
viola-jones object detection framework. It would be interesting to see how more [color=var(--color-accent-fg)]
state of the art techniques could be implemented in browser friendly javascript.
- CommonJS
- AMD
- global export / window
[color=var(--color-accent-fg)]Supported BrowsersSee [color=var(--color-accent-fg)]
caniuse.com/canvas. A [color=var(--color-accent-fg)]
polyfill for [color=var(--color-accent-fg)]
Promises is recommended if you need to support old browsers.
Find the best crop for image using options.
image: anything ctx.drawImage() accepts, usually HTMLImageElement, HTMLCanvasElement or HTMLVideoElement.
Keep in mind that [color=var(--color-accent-fg)]
origin policies apply to the image source. You may not use cross-domain images without [color=var(--color-accent-fg)]
CORS clearance.
returns: A promise for a [color=var(--color-accent-fg)]
cropResult.
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.
boost: optional array of regions whose 'interestingness' you want to boost (for example faces). See [color=var(--color-accent-fg)]
boost;
ruleOfThirds: optional boolean if set to false it will turn off the rule of thirds composition weight.
debug (internal): if true, cropResults will contain a debugCanvas and the complete results array.
There are many more (for now undocumented) options available. Check the [color=var(--color-accent-fg)]
source and be advised that they might change in the future.
Result of the promise returned by smartcrop.crop.
{ topCrop: crop;}
[color=var(--color-accent-fg)]cropAn individual crop.
{ [color=var(--color-prettylights-syntax-constant)]x: [color=var(--color-prettylights-syntax-constant)]11, [color=var(--color-prettylights-syntax-comment)]// pixels from the left side [color=var(--color-prettylights-syntax-constant)]y: [color=var(--color-prettylights-syntax-constant)]20, [color=var(--color-prettylights-syntax-comment)]// pixels from the top [color=var(--color-prettylights-syntax-constant)]width: [color=var(--color-prettylights-syntax-constant)]1, [color=var(--color-prettylights-syntax-comment)]// pixels [color=var(--color-prettylights-syntax-constant)]height: [color=var(--color-prettylights-syntax-constant)]1 [color=var(--color-prettylights-syntax-comment)]// pixels}
[color=var(--color-accent-fg)]boostDescribes a region to boost. A usage example of this is to take into account faces in the image. See [color=var(--color-accent-fg)]
smartcrop-cli for an example on how to integrate face detection.
Note that the impact the boost has is proportional to it's weight and area.
[color=var(--color-accent-fg)]TestsYou can run the tests using grunt test. Alternatively you can also just run grunt (the default task) and open [color=var(--color-accent-fg)]
http://localhost:8000/test/.There are benchmarks for both the browser (test/benchmark.html) and node (node test/benchmark-node.js [requires node-canvas]) both powered by [color=var(--color-accent-fg)]
benchmark.js.
If you just want some rough numbers: It takes < 20 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 suboptimal to run it on an entire gallery on page load.
[color=var(--color-accent-fg)]Contributors[color=var(--color-accent-fg)]Ports, Alternatives[color=var(--color-accent-fg)]Version history[color=var(--color-accent-fg)]2.0.5Fix TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier..
[color=var(--color-accent-fg)]2.0.4Typescript type definitions.
[color=var(--color-accent-fg)]2.0.2In short: It's a lot faster when calculating bigger crops. The quality of the crops should be comparable but the results are going to be different so this will be a major release.
[color=var(--color-accent-fg)]1.1.1Removed useless files from npm package.
[color=var(--color-accent-fg)]1.1Creating github releases. Added options.input which is getting passed along to iop.open.
[color=var(--color-accent-fg)]1.0Refactoring/cleanup to make it easier to use with node.js (dropping the node-canvas dependency) and enable support for boosts which can be used to do face detection. This is a 1.0 in the semantic meaning (denoting backwards incompatible API changes). It does not denote a finished product.
[color=var(--color-accent-fg)]LicenseCopyright (c) 2018 Jonas Wagner, licensed under the MIT License (enclosed)
窺視卡
雷達卡
發表於 2023-2-17 23:11:36
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
照妖鏡
樓主
