Top 10 JS image processing libraries

Time:2022-6-3
catalogue
  • introduce
  • 1.Pica
  • 2. Lena.js
  • 3. Compressor.js
  • 4. Fabric.js
  • 5. Blurify
  • 6. Merge Images
  • 7. Cropper.js
  • 8. CamanJS
  • 9. MarvinJ
  • 10. Grade

introduce

For many people, using JavaScript to process images is not a very simple thing. Fortunately, we can use third-party libraries to achieve the functions we want. This article introduces what JavaScript image processing libraries are available for us to choose and use! The following rankings are in no particular order

1.Pica

This plug-in can reduce the upload size of large images, thus saving upload time. It can resize the image in the browser without pixelation and is quite fast. It will automatically select excellent available technologies from web workers, web assembly, createimagebitmap and pure JS.

  • Reduce the upload size of large images and save upload time;
  • Save server resources in image processing;
  • Generate thumbnails in the browser;

https://github.com/nodeca/pica

2. Lena.js

This is an image processing library with 22 filters

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

3. Compressor.js

This is a simple JS image compressor, which uses the browser’s native canvas Toblob API to handle image compression. You can set the compressed output quality to 0 to 1.

https://github.com/fengyuanchen/compressorjs

4. Fabric.js

Fabric. JS allows JavaScript to easily create simple shapes on html<canvas> elements on Web pages, such as rectangles, circles, triangles and other polygons, or more complex shapes composed of many paths. Then, fabric JS will allow the mouse to manipulate the size, position, and rotation of these objects. You can also use fabric The JS library changes some properties of these objects, such as color, transparency, depth position on the web page, or selects groups of these objects. Fabric. JS also allows you to convert SVG images into JavaScript data that can be used to put them into <canvas> elements.

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

5. Blurify

It is used for blurring pictures and has elegant degradation support from CSS mode to canvas mode. The plug-in works in three modes:

  • Css: using the filter attribute
  • Canvas: exporting Base64 using canvas
  • Auto: CSS mode takes precedence, otherwise it will automatically switch to canvas mode

Simply transfer the image, blur value and mode to the function to obtain a simple and effective blurred image

https://github.com/JustClear/blurify

6. Merge Images

The library makes it easy to compose images together. Sometimes, using canvas can be tedious, 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 overlap each other and be repositioned. This function returns a promise, which is resolved to Base64 data URI. Both browser and node are supported js。

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

7. Cropper.js

The plug-in is a simple JavaScript image clipper, which can crop, rotate, zoom and zoom images in a visual environment. It also allows you to set the aspect ratio.

https://github.com/fengyuanchen/cropperjs

8. CamanJS

It is the canvas operation Library of JavaScript. It is an easy-to-use interface combined with advanced and efficient image /canvas editing technology. It is easy to extend with new filters and plug-ins, and it has a wide range of image editing functions, which are increasing. It is completely library independent and can be used in nodejs and browsers. You can select a set of preset filters or manually change attributes (such as brightness, contrast, saturation) to obtain the desired output.

https://github.com/meltingice/CamanJS/

9. MarvinJ

Marvinj is a pure JavaScript image processing framework derived from Marvin framework. Marvinj is simple and powerful for many different image processing applications. Marvin provides many algorithms to manipulate color and appearance. Marvin also has automatic detection function. The ability to use basic image functions (such as edges, corners, and shapes) is the foundation of image processing. The plug-in helps detect and analyze the corners of objects, so as to determine the location of the main objects in the scene. Because of this, objects can be automatically cropped out.

https://github.com/gabrielarchanjo/marvinj

10. Grade

The JS library produces complementary gradients generated from the first 2 main colors in the provided images. This allows the site to fill the div with matching gradients exported from the image. This is an easy-to-use plug-in that helps keep your site beautiful.


<div> 
    <img src="./samples/finding-dory.jpg" alt="" /> 
</div> 
<div> 
    <img src="./samples/good-dinosaur.jpg" alt="" /> 
</div> 
<script src="path/to/grade.js"></script> 
<script type="text/javascript"> 
 window.addEventListener('load', function(){ 
 Grade(document.querySelectorAll('.gradient-wrap')) 
 }) 
</script> 

The above is the details of the top 10 JS image processing libraries. For more information about JS image processing libraries, please pay attention to other developeppaer related articles!

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]