Manipulating images in JavaScript can be difficult and tedious. Fortunately, there are many libraries that can make this much easier. Here are some image processing libraries.

1. Pica 

Examples of address: http://nodeca.github.io/pica/demo/

Github: https://github.com/nodeca/pica pica 

High quality and high performance image resizing JS library can be implemented in the browser, the goal is to the fastest speed of high quality image zoom in the browser. It automatically selects the best available technology from Web-workers, Web Assembly, createImageBitmap, and pure JS.

Pica is a low-level development library that performs mathematical calculations, minimizing the impact of encapsulation. If a binary image is scaled, it needs to be loaded to the canvas (and then saved as a BLOb).



2. Lena.js 

Examples of address: https://fellipe.com/demos/lena-js/

Explanation of usage: https://ourcodeworld.com/articles/read/515/how-to-add-image-filters-photo-effects-to-images-in-the-browser-with-javascri pt-using-lena-js

Github: https://github.com/davidsonfellipe/lena.js 

This library mainly adds filters for images.



3. Compressor.js 

Examples of address: https://fengyuanchen.github.io/compressorjs/

Github: https://github.com/fengyuanchen/compressorjs 

Compresse.js is a JavaScript image Compressor. Compression is performed using the browser’s native Canvas.toblob API, which means it is lossy compression. This method is generally used to precompress an image file before the client uploads it.

 4. Fabric.js 

Example address: http://fabricjs.com/

Examples explain: http://fabricjs.com/articles/

Github: https://github.com/fabricjs/fabric.js 

Fabric is a powerful and simple JS Canvas library that allows you to create, fill, and gradient shapes on the Canvas. Combination graphics (including combination graphics, graphics text, pictures, etc.) and a series of functions. To put it simply, we can implement the complex Canvas function in a simple way by using Fabric

You can also use the fabric.js library to change certain properties of these objects, such as their color, transparency, depth position on a web page, or select groups of these objects. Fabric.js can also convert SVG images into JavaScript data that can be used to put them into the

element.



5. Blurify 

Blurify. Js is a small and useful PLUGIN for javascript image blur effects. Use this JS plug-in to blur any image.

Examples of address: https://justclear.github.io/blurify/

 Github: https://github.com/JustClear/blurify 



6. Merge images

Github: https://github.com/lukechilds/merge-images 

The library makes it easy to compose images together. Sometimes, using a canvas can be a bit cumbersome, especially if you only need the canvas context to do relatively simple things (such as merging some images together).

Merge-images abstracts all repetitive tasks into a simple function call. Images can be overlapped and repositioned. This function returns a Promise that resolves to a Base64 data URI. Supports both browsers and Node.js.



7. Cropper.js 

Examples of address: https://fengyuanchen.github.io/cropperjs/

Github: https://github.com/fengyuanchen/cropperjs

Cropperjs is a very powerful and simple image cropping tool, it can be configured very flexible, support mobile, including Internet Explorer 9 and other modern browsers.

  8. CamanJS

Examples of address: http://camanjs.com/examples/

 Github: https://github.com/meltingice/

CamanJS/ CamanJS is a Canvas based image processing Javascript library that combines an easy-to-use interface with advanced and efficient image editing techniques. CamanJS is easy to extend with new filters and plug-ins and comes with a wide range of image editing capabilities. It is a fully independent library that supports working on NodeJS and browsers.



9. MarvinJ 

Website: https://www.marvinj.org/en/index.html

Github: https://github.com/gabrielarchanjo/marvinj 

MarvinJ is a pure JavaScript image processing Framework derived from the Marvin Framework. MarvinJ is simple and powerful for many different image processing applications.

Marvin provides many algorithms to manipulate color and appearance. Marvin can also test functions automatically. The ability to use basic image functions such as edges, corners, and shapes is fundamental to image processing. The plug-in helps to detect and analyze the corners of the object to determine the location of the main object in the scene. For these reasons, objects can be cropped automatically.



 10. Grade 

Examples of address: https://benhowdle89.github.io/grade/

 Github: https://github.com/benhowdle89/grade

Grade. Js is a js plugin that can generate background gradients based on the two main colors of an image. It works by extracting the two main colors of an image and applying them to the image container as the beginning and end colors of the gradient.



communication

Like this article, trouble like, favorites, forward, in the process of learning the web front end, often because there is no information or no one to guide their own do not want to learn, so I specially prepared a group 545667817, supporting information can find management sister to receive! No matter which stage of learning partners can obtain their own corresponding information, like the collection into the group partners have the opportunity to obtain the entity web front-end learning books, thank you for your support!! 


Source: author: front end little wisdom links: https://segmentfault.com/a/1190000022926686 SegmentFaultCopy the code