• 10 JavaScript Image Manipulation Libraries for 2020
  • By Mahdhi Rezvi
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: IAMSHENSH
  • Proofreader: NiayyY-S

Top 10 JavaScript Image Processing libraries for 2020

Manipulating images in JavaScript can be difficult and tedious. Fortunately, there are a number of libraries that can make this very easy. Here are some of my favorite libraries in different categories.

If you find something useful, try encapsulating it as a component of your framework of choice. This way, you’ll have a reusable component with a declarative API ready to use.

1. Pica

This plugin helps you reduce the upload size of large images, thus saving upload time. It allows you to resize images in your browser quickly and without pixelation, as it automatically selects the best available technology from Web Workers, WebAssembly, createImageBitmap methods, and pure JavaScript.

Demonstrate making

2. Lena.js

This cool image library is very small, but it has about 22 image filters and is a lot of fun. You can also create and add new filters to the GitHub repository.

Github Demo tutorial

3. Compressor.js

This is a simple JavaScript image compressor that uses the browser’s native Canvas.toblob API to handle image compression. This allows you to set the compressed output quality between 0 and 1.

Demonstrate making

4. Fabric.js

Fabric.js allows you to easily create simple shapes, such as rectangles, circles, triangles, and other polygons, or more complex shapes made up of many paths, using JavaScript on HTML \

elements on a web page. Fabric.js also allows you to manipulate the size, position, and rotation of these objects using the mouse.

You can also use the fabric.js library to change properties of these objects, such as their color, transparency, depth position on a web page, or select groups of these objects. Fabric.js also allows you to convert SVG images to JavaScript data and use it directly in the \

element.

Github Demo tutorial

5. Blurify

This is a small (about 2KB) library for blurrying images and has excellent degrade support from CSS mode to Canvas mode. The plug-in works in the following three modes:

  • cssUse:filterProperties (default)
  • canvasUse:canvasExport the base64 format
  • auto: Preferred usecssMode, automatically converted to if not supportedcanvasmodel

You simply pass the image, blur value and mode to the function to get a blurred image easily and efficiently.

Demonstrate making

6. Merge Images

The library allows you to easily compose images without messing up the canvas. Sometimes, using a canvas can be a bit of a pain, especially if you only need a canvas context to perform relatively simple operations (such as merging images). Merge-images abstracts all repetitive tasks into a simple function.

Images can be superimposed and transposed. This function returns a Promise and resolves a URI of a Base64 data type. Supports both browsers and Node.js.

Github

7. Cropper.js

The plug-in is a simple JavaScript image clipper that allows you to crop, rotate, and scale images in an interactive environment. It also allows you to set aspect ratios.

Demonstrate making

8. CamanJS

This is JavaScript’s Canvas manipulation library. It has an easy-to-use interface and advanced and efficient image/canvas editing technology. It’s easy to expand with new filters and plug-ins, and it has a range of image-editing features that are still being added. It is completely dependency free and can be used in both Node.js and browsers.

You can select a set of preset filters or manually change the properties (such as brightness, contrast, saturation) to get the desired results.

Demo website Github

9. MarvinJ

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

In addition to providing many algorithms to control color and appearance, Marvin has the ability to automatically detect features. Its image processing capabilities are based on the basic features of the image, such as edges, corners and shapes. This plug-in locates the main objects in the scene by detecting and analyzing the corners of the objects. Based on these features, it can automatically crop out objects.

Website making

10. Grade

This JavaScript library generates complementary gradients from the first two main colors in the image. This way, you can extract gradients from images to fill divs on your site. This is an easy to use plugin to help you keep your website visually beautiful.

This is a plug-in that I personally picked out of this list, and I went through a lot of trouble getting similar output from this plug-in.

The HTML file

<! The gradient will be applied to these external divs as the background image -->
<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>
<div class="gradient-wrap">
    <img src="./samples/good-dinosaur.jpg" alt="" />
</div>
Copy the code

JavaScript

<script src="path/to/grade.js"></script>
<script type="text/javascript">
    window.addEventListener('load'.function(){
        /* A list of nodes (or a single node) of all your image containers. The library will find a  in each container to create the gradient. * /
        Grade(document.querySelectorAll('.gradient-wrap'))})</script>
Copy the code

Demonstrate making

Hope you enjoyed this article. Feel free to comment if you feel you have something to add.

Happy coding!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.