20 Best JavaScript Image Processing Plugins for Web Development
20 Best JavaScript Image Processing Plugins for Web Development. These libraries offer a variety of features and capabilities, so you can choose the one that best meets your needs.
If you`re looking for Javascript plugins to do image processing, here are Best Of 20 Javascript Image Processing Plugins that will allow you to resize and crop, add overlay, blur or pixelate, apply a large variety of special effects and filters, etc. These plugins will help you in your tasks where you need to play with images.
Image compressor
A simple JavaScript image compressor. Uses the Browser’s native canvas.toBlob API to do the compression work. General use this to precompress a client image file before upload it.
Pica
Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.
Lena.js
Tiny library for image processing.
Fabric.js
Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.
Imagetracerjs
Simple raster image tracer and vectorizer written in JavaScript.
Image Cropper
A image cropper for cropping user avatar, no dependencies.
img2css
Convert any image to pure CSS. Well, it just puts the image in a canvas, calculates an array with the rgb values, and then… creates a single pixel shadow for each value!
Processing.js
It is a JavaScript library that allows you to write Processing code that is then translated into JavaScript and embedded in a webpage.
JPG Glitch
This is an experiment for the web browser. It corrupts jpg images so that they appear “glitched”.
Blurify
This is a tiny(~2kb) library to blur pictures, with graceful downgrade support from css mode to canvas mode.
PNGjs-Image
JavaScript-based PNG image encoder, decoder, and manipulator.
MagicEye.js
This is a JavaScript library for generating “Magic Eye” images (technically single image random dot stereograms, or SIRDS) in the browser.
vintageJS
Add a retro/vintage effect to images using the HTML5 canvas element.
Merge-images
Canvas can be kind of a pain to work with sometimes, especially if you just need a canvas context to do something relatively simple like merge some images together. merge-images abstracts away all the repetitive tasks into one simple function call.
PhotoClip
A gesture to drive image cropping plug-in.
CamanJS
It is canvas manipulation in Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which continues to grow. It’s completely library independent and works both in NodeJS and the browser.
MarvinJ
It is a pure Javascript image processing framework based on Marvin. You can use it for image processing on web, server and mobile environments.
imgix.js
It allows developers to easily generate responsive images using the srcset and sizes attributes, or the picture element. This lets you write a single image URL that is parsed and used to make images look great at any screen size, by using imgix to process and resize your images on the fly.
Grade
This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.
