jwagner/smartcrop.js

smartcrop.js is a JavaScript library for automatically choosing where to crop an image. Given an image and the dimensions you want the final crop to be, it analyzes the image and returns coordinates for the most visually interesting portion, rather than always cropping from the center or a fixed position. The algorithm uses basic image processing steps: it detects edges, looks for skin-tone colored regions, identifies highly saturated areas, and then slides a window across the image to score candidate crop rectangles. The crop with the highest score, weighted toward putting important content in the center and away from edges, is returned as the result. The output is a set of coordinates (x, y, width, height) that you then apply with your existing image handling code. The library runs in a web browser, in Node.js on a server, or from the command line via a companion tool called smartcrop-cli. In the browser it accepts standard image, canvas, or video elements. For server-side use, wrapper packages integrate it with common image processing tools. The README also points to a companion library called dont-crop, for situations where padding an image with matching background colors is preferable to cropping. Face detection is not built in, but the README explains how to connect several third-party JavaScript face detection libraries to give detected faces extra weight in the crop scoring. This helps ensure that portraits are cropped to keep faces in frame. The author notes in the README that a future machine-learning based version is in development. The current version is a personal project that has also been used on high-traffic production sites. It is available via npm and the source is short enough, as the README puts it, to read through quickly if you want to understand how it works.