[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3414":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},3414,"smartcrop.js","jwagner\u002Fsmartcrop.js","jwagner","Content aware image cropping","http:\u002F\u002F29a.ch\u002F2014\u002F04\u002F03\u002Fsmartcrop-content-aware-image-cropping",null,"JavaScript",12953,572,209,20,0,5,43.27,"MIT License",false,"main",true,[24,25,26,27],"image-processing","javascript","nodejs","smartcrop","2026-06-12 02:00:50","# smartcrop.js\n\n![example workflow](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fsmartcrop.js\u002Factions\u002Fworkflows\u002Ftests.yml\u002Fbadge.svg)\n\nSmartcrop.js implements an algorithm to find good crops for images.\nIt can be used in the browser, in node or via a CLI.\n\n![Example](https:\u002F\u002F29a.ch\u002Fsandbox\u002F2014\u002Fsmartcrop\u002Fexample.jpg)\nImage: [https:\u002F\u002Fwww.flickr.com\u002Fphotos\u002Fendogamia\u002F5682480447\u002F](https:\u002F\u002Fwww.flickr.com\u002Fphotos\u002Fendogamia\u002F5682480447) by Leon F. Cabeiro (N. Feans), licensed under CC-BY-2.0\n\n> **Note**\n> 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 [let me know](https:\u002F\u002F29a.ch\u002Fabout).\n\n## Demos\n\n- [Smartcrop.js Test Suite](https:\u002F\u002F29a.ch\u002Fsandbox\u002F2014\u002Fsmartcrop\u002Fexamples\u002Ftestsuite.html), contains over 100 images, **heavy**.\n- [Smartcrop.js Test Bed](https:\u002F\u002F29a.ch\u002Fsandbox\u002F2014\u002Fsmartcrop\u002Fexamples\u002Ftestbed.html), allows you to test smartcrop with your own images and different face detection libraries.\n- [Automatic Photo transitions](https:\u002F\u002F29a.ch\u002Fsandbox\u002F2014\u002Fsmartcrop\u002Fexamples\u002Fslideshow.html), automatically creates Ken Burns transitions for a slide show.\n\n## Simple Example\n\n```javascript\n\u002F\u002F you pass in an image as well as the width & height of the crop you\n\u002F\u002F want to optimize.\nsmartcrop.crop(image, { width: 100, height: 100 }).then(function(result) {\n  console.log(result);\n});\n```\n\nOutput:\n\n```javascript\n\u002F\u002F smartcrop will output you its best guess for a crop\n\u002F\u002F you can now use this data to crop the image.\n{topCrop: {x: 300, y: 200, height: 200, width: 200}}\n```\n\n## Download\u002F Installation\n\n`npm install smartcrop`\nor just download [smartcrop.js](https:\u002F\u002Fraw.githubusercontent.com\u002Fjwagner\u002Fsmartcrop.js\u002Fmaster\u002Fsmartcrop.js) from the git repository.\n\nSmarcrop requires support for [Promises](http:\u002F\u002Fcaniuse.com\u002F#feat=promises),\nuse a [polyfill](https:\u002F\u002Fgithub.com\u002Ftaylorhakes\u002Fpromise-polyfill) for unsupported browsers or set `smartcrop.Promise` to your favorite promise implementation\n(I recommend [bluebird](http:\u002F\u002Fbluebirdjs.com\u002F)).\n\n\n## Consider avoiding crops using dont-crop\n\nIf you are interested in using smartcrop.js to crop your images you should also consider to avoid cropping them by using [dont-crop](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fdont-crop\u002F).\nDont-crop gives you matching gradients and colors to pad and complement your images.\n\n![Example](https:\u002F\u002F29a.ch\u002Fimages\u002Fdont-crop.cache-399897619c3de2e0.jpg)\n\n## Command Line Interface\n\nThe [smartcrop-cli](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fsmartcrop-cli) offers command line interface to smartcrop.js.\n\n## Node\n\nYou can use smartcrop from nodejs via either [smartcrop-gm](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fsmartcrop-gm) (which is using image magick via gm) or [smartcrop-sharp](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fsmartcrop-sharp) (which is using libvips via sharp).\nThe [smartcrop-cli](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fsmartcrop-cli) can be used as an example of using smartcrop from node.\n\n## Stability\n\nWhile _smartcrop.js_ is a small personal project it is currently being used on high traffic production sites.\nIt has a basic set of automated tests and a test coverage of close to 100%.\nThe tests run in all modern browsers thanks to [saucelabs](https:\u002F\u002Fsaucelabs.com\u002F).\nIf in any doubt the code is short enough to perform a quick review yourself.\n\n## Algorithm Overview\n\nSmartcrop.js works using fairly dumb image processing. In short:\n\n1. Find edges using laplace\n1. Find regions with a color like skin\n1. Find regions high in saturation\n1. Boost regions as specified by options (for example detected faces)\n1. Generate a set of candidate crops using a sliding window\n1. Rank them using an importance function to focus the detail in the center\n   and avoid it in the edges.\n1. Output the candidate crop with the highest rank\n\n## Face detection\n\nThe smartcrop algorithm itself is designed to be simple, relatively fast, small and generic.\n\nIn many cases it does make sense to add face detection to it to ensure faces get the priority they deserve.\n\nThere are multiple javascript libraries which can be easily integrated into smartcrop.js.\n\n- [ccv js](https:\u002F\u002Fgithub.com\u002Fliuliu\u002Fccv) \u002F [jquery.facedetection](http:\u002F\u002Ffacedetection.jaysalvat.com\u002F)\n- [tracking.js](https:\u002F\u002Ftrackingjs.com\u002Fexamples\u002Fface_hello_world.html)\n- [opencv.js](https:\u002F\u002Fdocs.opencv.org\u002F3.3.1\u002Fd5\u002Fd10\u002Ftutorial_js_root.html)\n- [node-opencv](https:\u002F\u002Fgithub.com\u002Fpeterbraden\u002Fnode-opencv)\n\nYou can experiment with all of these in the [smartcrop.js testbed](https:\u002F\u002F29a.ch\u002Fsandbox\u002F2014\u002Fsmartcrop\u002Fexamples\u002Ftestbed.html)\n\nOn 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).\njquery.facedetection has dependency on jquery and from my limited experience seems to perform worse than the others.\n\nOn the server side node-opencv can be quicker but comes with some [annoying issues](https:\u002F\u002Fgithub.com\u002Fpeterbraden\u002Fnode-opencv\u002Fissues\u002F415) as well.\n\nIt's also worth noting that all of these libraries are based on the now dated [viola-jones](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FViola%E2%80%93Jones_object_detection_framework) object detection framework.\nIt would be interesting to see how more [state of the art](http:\u002F\u002Fmmlab.ie.cuhk.edu.hk\u002Fprojects\u002FWIDERFace\u002FWiderFace_Results.html) techniques could be implemented in browser friendly javascript.\n\n## Supported Module Formats\n\n- CommonJS\n- AMD\n- global export \u002F window\n\n## Supported Browsers\n\nSee [caniuse.com\u002Fcanvas](http:\u002F\u002Fcaniuse.com\u002Fcanvas).\nA [polyfill](https:\u002F\u002Fgithub.com\u002Ftaylorhakes\u002Fpromise-polyfill) for\n[Promises](http:\u002F\u002Fcaniuse.com\u002F#feat=promises) is recommended if you need to support old browsers.\n\n## API\n\n### smartcrop.crop(image, options)\n\nFind the best crop for _image_ using _options_.\n\n**image:** anything ctx.drawImage() accepts, usually HTMLImageElement, HTMLCanvasElement or HTMLVideoElement.\n\nKeep in mind that [origin policies](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSame-origin_policy) apply to the image source.\nYou may not use cross-domain images without [CORS](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCross-origin_resource_sharing) clearance.\n\n**options:** [cropOptions](#cropOptions)\n\n**returns:** A promise for a [cropResult](#cropResult).\n\n### cropOptions\n\n**minScale:** minimal scale of the crop rect, set to 1.0 to prevent smaller than necessary crops (lowers the risk of chopping things off).\n\n**width:** width of the crop you want to use.\n\n**height:** height of the crop you want to use.\n\n**boost:** optional array of regions whose 'interestingness' you want to boost (for example faces). See [boost](#boost);\n\n**ruleOfThirds:** optional boolean if set to false it will turn off the rule of thirds composition weight.\n\n**debug _(internal)_:** if true, cropResults will contain a debugCanvas and the complete results array.\n\nThere are many more (for now undocumented) options available.\nCheck the [source](smartcrop.js#L32) and be advised that they might change in the future.\n\n### cropResult\n\nResult of the promise returned by smartcrop.crop.\n\n```javascript\n{\n  topCrop: crop;\n}\n```\n\n### crop\n\nAn individual crop.\n\n```javascript\n{\n  x: 11, \u002F\u002F pixels from the left side\n  y: 20, \u002F\u002F pixels from the top\n  width: 1, \u002F\u002F pixels\n  height: 1 \u002F\u002F pixels\n}\n```\n\n### boost\n\nDescribes a region to boost. A usage example of this is to take\ninto account faces in the image. See [smartcrop-cli](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fsmartcrop-cli) for an example on how to integrate face detection.\n\n```javascript\n{\n  x: 11, \u002F\u002F pixels from the left side\n  y: 20, \u002F\u002F pixels from the top\n  width: 32, \u002F\u002F pixels\n  height: 32, \u002F\u002F pixels\n  weight: 1 \u002F\u002F in the range [0, 1]\n}\n```\n\nNote that the impact the boost has is proportional to it's weight and area.\n\n## Tests\n\nYou can run the tests using `grunt test`. Alternatively you can also just run grunt (the default task) and open \u003Chttp:\u002F\u002Flocalhost:8000\u002Ftest\u002F.>\n\n## Benchmark\n\nThere are benchmarks for both the browser (test\u002Fbenchmark.html) and node (node test\u002Fbenchmark-node.js [requires node-canvas])\nboth powered by [benchmark.js](http:\u002F\u002Fbenchmarkjs.com).\n\nIf you just want some rough numbers: It takes **\u003C 20 ms** to find a **square crop** of a **640x427px** picture on an i7.\nIn other words, it's fine to run it on one image, it's suboptimal to run it on an entire gallery on page load.\n\n## Contributors\n\n- [Christian Muehlhaeuser](https:\u002F\u002Fgithub.com\u002Fmuesli)\n\n## Ports, Alternatives\n\n- [connect-thumbs](https:\u002F\u002Fgithub.com\u002Finadarei\u002Fconnect-thumbs) Middleware for connect.js that supports smartcrop.js by [Irakli Nadareishvili](https:\u002F\u002Fgithub.com\u002Finadarei\u002Fconnect-thumbs)\n- [smartcrop-java](https:\u002F\u002Fgithub.com\u002FQuadFlask\u002Fsmartcrop-java) by [QuadFlask](https:\u002F\u002Fgithub.com\u002FQuadFlask\u002F)\n- [smartcrop-android](https:\u002F\u002Fgithub.com\u002FQuadFlask\u002Fsmartcrop-android) by [QuadFlask](https:\u002F\u002Fgithub.com\u002FQuadFlask\u002F)\n- [smartcrop.go](https:\u002F\u002Fgithub.com\u002Fmuesli\u002Fsmartcrop) by [Christian Muehlhaeuser](https:\u002F\u002Fgithub.com\u002Fmuesli)\n- [smartcrop.py](https:\u002F\u002Fgithub.com\u002Fhhatto\u002Fsmartcrop.py) by [Hideo Hattori](http:\u002F\u002Fwww.hexacosa.net\u002Fabout\u002F)\n- [smartcrop-rails](https:\u002F\u002Fgithub.com\u002Fsadiqmmm\u002Fsmartcrop-rails) smartcrop wrapped in a ruby gem by [Mohammed Sadiq](https:\u002F\u002Fgithub.com\u002Fsadiqmmm\u002F)\n- [smartcrop.net](https:\u002F\u002Fgithub.com\u002Fsoftawaregmbh\u002Fsmartcrop.net) c# .net port by [softaware gmbh](https:\u002F\u002Fwww.softaware.at\u002F)\n- [dont-crop](https:\u002F\u002Fgithub.com\u002Fjwagner\u002Fdont-crop\u002F) a library to avoid cropping by padding images with matching colors or gradients\n\n## Version history\n\n### 2.0.5\nFix `TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.`.\n\n### 2.0.4\nTypescript type definitions.\n\n### 2.0.2\n\nIn short: It's a lot faster when calculating bigger crops.\nThe quality of the crops should be comparable but the results\nare going to be different so this will be a major release.\n\n### 1.1.1\n\nRemoved useless files from npm package.\n\n### 1.1\n\nCreating github releases. Added options.input which is getting passed along to iop.open.\n\n### 1.0\n\nRefactoring\u002Fcleanup 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.\nThis is a 1.0 in the semantic meaning (denoting backwards incompatible API changes).\nIt does not denote a finished product.\n\n## License\n\nCopyright (c) 2018 Jonas Wagner, licensed under the MIT License (enclosed)\n","smartcrop.js 是一个用于智能裁剪图片的JavaScript库，它能够根据图片内容自动选择最佳裁剪区域。其核心功能是通过分析图像中的重要视觉元素来确定最合适的裁剪位置和大小，支持浏览器、Node.js环境及命令行调用。该工具特别适用于需要对大量图片进行自动化处理以提高效率或保证一致性的场景，如社交媒体平台、电子商务网站等，在这些场合下使用smartcrop.js可以显著提升用户体验而无需人工干预。此外，项目还提供了与不同面部识别库结合使用的示例，进一步增强了其实用性和灵活性。",2,"2026-06-11 02:54:10","top_language"]