preface
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: nodeca. Making. IO/pica/demo /
Github: 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
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
Example address: fabricjs.com/
Examples: fabricjs.com/articles/
Making: 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 elements.
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: justclear. Making. IO/blurify /
Making: 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
Examples of address: fengyuanchen. Making. IO/cropperjs /
Making: 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/
Github: 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: 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.
Finally: In the process of learning the Web front end, it is inevitable to encounter a lot of problems, these problems may bother you for a long time, so I have a Web development learning exchange group (545667817), which are ITPUB partners, and organized a most comprehensive front-end learning materials, from the most basic HTML+CSS+JS to mobile HTML5 project actual combat learning materials have been organized, want to learn can apply to join, we learn from each other, communicate with each other, common progress, share different learning materials every day!
