This article has been authorized by the author
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
Case address: nodeca. Making. IO/pica/demo/lot: github.com/nodeca/pica
Pica implements high quality and high performance image resizing JS libraries in the browser, with the goal of achieving high quality image scaling as fast as possible 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
Example address: fellipe.com/demos/lena-…
Usage explanation: ourcodeworld.com/articles/re…
Making: github.com/davidsonfel…
This library mainly adds filters for images.
3. Compressor.js
Examples of address: fengyuanchen. Making. IO/compressorj… Making: github.com/fengyuanche…
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
fabricjs.com/articles/ Github: github.com/fabricjs/fa…
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
5. Blurify
Blurify. Js is a small and useful PLUGIN for javascript image blur effects. Use this JS plug-in to blur any image.
Address: case justclear. Making. IO/blurify/lot: github.com/JustClear/b…
6. Merge images
Making: github.com/lukechilds/…
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
Address: case fengyuanchen. Making. IO/cropperjs/lot: github.com/fengyuanche…
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
Example address: camanjs.com/examples/
Making: github.com/meltingice/…
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: www.marvinj.org/en/index.ht… Making: github.com/gabrielarch…
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: benhowdle89. Dead simple. IO/grade /
Making: github.com/benhowdle89…
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.
Translated by Mahdhi Rezvi
Original text: blog. Bitsrc. IO/image – manip…
The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.
communication
This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.
