Open Source JavaScript Image Processing Libraries

Image cropping is a common task in many web applications. Usually just cutting out the center of the image works out ok. It's often a compromise and sometimes it fails miserably. Smartcrop.js is the result of my experiments with content aware image cropping. It uses fairly simple image processing and a few rules to attempt to create better crops of images. This library is still in it's infancy but the early results look promising. So true to the open source mantra of release early, release often, I'm releasing version 0.0.0 of smartcrop.js. Smartcrop.js implements an algorithm to find good crops for images. It can be used in the browser, in node or via a CLI. Smarcrop requires support for Promises, use a polyfill for unsupported browsers or set smartcrop.Promise to your favorite promise implementation (I recommend bluebird).

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly using CSS. What we're doing is adding filters to the images, as well as applying color and/or gradient overlays via various blending techniques to mimic filter effects. This means less manual image processing and more fun filter effects on the web! We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

An image processing library for Node written entirely in JavaScript, with zero native dependencies. If you're using this library with TypeScript the method of importing slightly differs from JavaScript. Instead of using require, you must import it with ES6 default import scheme. If you're using a web bundles (webpack, rollup, parcel) you can benefit from using the module build of jimp. Using the module build will allow your bundler to understand your code better and exclude things you aren't using. If you're using webpack you can set process.browser to true and your build of jimp will exclude certain parts, making it load faster. The static Jimp.read method takes the path to a file, URL, dimensions, a Jimp instance or a buffer and returns a Promise. In some cases, you need to pass additional parameters with an image's URL.

SuperEmbed.js detects embedded videos from YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more on webpages and makes them responsive. Essentially, this means they stretch to fill their container while still maintaining the content's original aspect ratio. I created SuperEmbed to fix all my issues with existing solutions, including (but not limited to) unnecessary reliance on other libraries, bloated code, and poor fallback support.

The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, AVIF and WebP images of varying dimensions. Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings due to its use of libvips. Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly. Lanczos resampling ensures quality is not sacrificed for speed. As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available. Most modern macOS, Windows and Linux systems running Node.js v10+ do not require any additional install or runtime dependencies. This module supports reading JPEG, PNG, WebP, AVIF, TIFF, GIF and SVG images. Output images can be in JPEG, PNG, WebP, AVIF and TIFF formats as well as uncompressed raw pixel data. Streams, Buffer objects and the filesystem can be used for input and output.

The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more, all that with a lightweight core (~7 KB) and intuitive interface. To get started, download the project. This project includes all of the tracking.js examples, source code dependencies you'll need to get started. Unzip the project somewhere on your local drive. The package includes an initial version of the project you'll be working with. While you're working, you'll need a basic HTTP server to serve your pages. Test out the web server by loading the finished version of the project. The main goal of tracking.js is to provide those complex techniques in a simple and intuitive way on the web. We believe computer vision is important to improve people's life, bringing it to the web will make this future a reality a lot faster.