9个JavaScript图像处理库，收藏好留备用

待我称王封你为后i 2022-10-10 12:44 213阅读 0赞

![2b386affe565f9fbca5201a62f3fde98.png][]

1：pica  
一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库

此插件可帮助你减小大图像的上传文件大小，从而节省上传时间。使你可以在浏览器中调整图像大小，而不会出现像素化并且相当快。它会从网络工作者，网络程序集，createImageBitmap和纯JS中自动选择最佳的可用技术。

Demo：http://nodeca.github.io/pica/demo/  
Github：https://github.com/nodeca/pica

![608bf2871e5ed8469da57eee52e27032.png][]

2:html2canvas  
一个强大的使用js开发的浏览器网页截图工具

html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上可用的信息来构建屏幕截图。

Demo：http://html2canvas.hertzen.com/  
Github：https://github.com/niklasvh/html2canvas  
star:23.4k

![295d54b29774e0ba522ed902884a0ac7.png][]

3:Lena.js  
一个轻量级的可以给你图像加各种滤镜的js库  
Lena.js是一个用于图像处理的微型库。它允许你将一些基本的图像过滤器应用于文档中的图像。你可以从项目中包含Lena.js的本地副本, 也可以使用CDN或本地副本：  
Demo：https://fellipe.com/demos/lena-js/  
Github：https://github.com/davidsonfellipe/lena.js

![e1dbc0406da747a544e04630031d5f31.png][]

4:Compressor.js  
一个使用本地canvas.toBlob API进行图像有损压缩的js库

这是一个简单的JS图像压缩器，它使用浏览器的本机canvas.toBlob API来处理图像压缩。这使你可以将其压缩输出，质量设置为0到1。

Demo：https://fengyuanchen.github.io/compressorjs/  
Github：https://github.com/fengyuanchen/compressorjs  
![74bc7c8f010a30049e686f364a3f4c70.png][]

5：cropperjs  
一款强大的图片裁切库, 支持灵活的图片裁切方式  
该插件是一个简单的JavaScript图像裁剪器，可让你在交互式环境中裁剪，旋转，缩放和缩放图像。它还允许设置纵横比。

Demo：https://fengyuanchen.github.io/cropperjs/  
Github：https://github.com/fengyuanchen/cropperjs  
star:9.3k  
![7fafca7c94e97b433cbc49a94a8096fa.png][]

6：merge-images  
一个将多张图片合并成一张图的js插件,该库可以帮助你轻松地将图像合成在一起，而不会弄乱画布。

Github：https://github.com/lukechilds/merge-images  
star:1.2k

![1f4dad69cd1ff3022a5e624b3b919d1c.png][]

7：Grade  
Grade 是一个 JavaScript 库，作用是从图像中提取前2个主要颜色产生互补的渐变。  
Demo：https://benhowdle89.github.io/grade/  
Github：https://github.com/benhowdle89/grade  
star:3.6k

![9f92af516906f2d698345605821859c9.png][]

8：Fabric.js  
Fabric.js 是一个在服务器端运行的 [Node.js][] 扩展模块，用于在Web上绘制各种图形的 JS 库。

Demo：http://fabricjs.com/  
Github：https://github.com/fabricjs/fabric.js  
star:18.7k  
![203ed765117f0f92337c469ea4bfa03f.png][]

9：dom-to-image  
一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库  
官网：https://www.marvinj.org/en/index.html  
Github：https://github.com/gabrielarchanjo/marvinj  
![a4e8631cc3f832d2f0b824ccf6691725.png][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[2b386affe565f9fbca5201a62f3fde98.png]: /images/20221005/649cec4bad9e4295b878b9092e573ec1.png
[608bf2871e5ed8469da57eee52e27032.png]: /images/20221005/4d03245e63314865a1ebccb418405746.png
[295d54b29774e0ba522ed902884a0ac7.png]: /images/20221005/de5970adf27347dba5ecc3c7df735336.png
[e1dbc0406da747a544e04630031d5f31.png]: /images/20221005/a78e9cc288a74383a14e580afa6a2ee5.png
[74bc7c8f010a30049e686f364a3f4c70.png]: /images/20221005/56cc1533099c4bc4b932eb7966907945.png
[7fafca7c94e97b433cbc49a94a8096fa.png]: /images/20221005/54f74971451e4270aa26b20b94cd8dd3.png
[1f4dad69cd1ff3022a5e624b3b919d1c.png]: /images/20221005/51d4ada9983f443197511daf47daf1a5.png
[9f92af516906f2d698345605821859c9.png]: /images/20221005/b640b000b79a40afb4c02af03e2bf4b4.png
[Node.js]: http://www.oschina.net/p/nodejs
[203ed765117f0f92337c469ea4bfa03f.png]: /images/20221005/0f7f86f7c0de4570b6f4581d59619508.png
[a4e8631cc3f832d2f0b824ccf6691725.png]: /images/20221005/568f85831a3444ccbe587f611ddbb103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/31a9b25a3b744bfca895d8f8e8b38099.png