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

冷不防 2023-01-22 13:59 8阅读 0赞

![2b386affe565f9fbca5201a62f3fde98.png][]

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

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

Demo：[http://nodeca.github.io/pica/demo/][http_nodeca.github.io_pica_demo]  
Github：[https://github.com/nodeca/pica][https_github.com_nodeca_pica]

![608bf2871e5ed8469da57eee52e27032.png][]

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

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

Demo：[http://html2canvas.hertzen.com/][http_html2canvas.hertzen.com]  
Github：[https://github.com/niklasvh/html2canvas][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/][https_fellipe.com_demos_lena-js]  
Github：[https://github.com/davidsonfellipe/lena.js][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/][https_fengyuanchen.github.io_compressorjs]  
Github：[https://github.com/fengyuanchen/compressorjs][https_github.com_fengyuanchen_compressorjs]

![74bc7c8f010a30049e686f364a3f4c70.png][]

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

Demo：[https://fengyuanchen.github.io/cropperjs/][https_fengyuanchen.github.io_cropperjs]  
Github：[https://github.com/fengyuanchen/cropperjs][https_github.com_fengyuanchen_cropperjs]  
star:9.3k

![7fafca7c94e97b433cbc49a94a8096fa.png][]

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

Github：[https://github.com/lukechilds/merge-images][https_github.com_lukechilds_merge-images]  
star:1.2k

![1f4dad69cd1ff3022a5e624b3b919d1c.png][]

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

![9f92af516906f2d698345605821859c9.png][]

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

Demo：[http://fabricjs.com/][http_fabricjs.com]  
Github：[https://github.com/fabricjs/fabric.js][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][https_www.marvinj.org_en_index.html]  
Github：[https://github.com/gabrielarchanjo/marvinj][https_github.com_gabrielarchanjo_marvinj]

![a4e8631cc3f832d2f0b824ccf6691725.png][]

[2b386affe565f9fbca5201a62f3fde98.png]: /images/20221020/a0f604944e6e44aa8e54f02610342c46.png
[http_nodeca.github.io_pica_demo]: https://links.jianshu.com/go?to=http%3A%2F%2Fnodeca.github.io%2Fpica%2Fdemo%2F
[https_github.com_nodeca_pica]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fnodeca%2Fpica
[608bf2871e5ed8469da57eee52e27032.png]: /images/20221020/7b049ed711874812ae6ee4057c0fde55.png
[http_html2canvas.hertzen.com]: https://links.jianshu.com/go?to=http%3A%2F%2Fhtml2canvas.hertzen.com%2F
[https_github.com_niklasvh_html2canvas]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fniklasvh%2Fhtml2canvas
[295d54b29774e0ba522ed902884a0ac7.png]: /images/20221020/f36890422819439abbe330c1a0330612.png
[https_fellipe.com_demos_lena-js]: https://links.jianshu.com/go?to=https%3A%2F%2Ffellipe.com%2Fdemos%2Flena-js%2F
[https_github.com_davidsonfellipe_lena.js]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fdavidsonfellipe%2Flena.js
[e1dbc0406da747a544e04630031d5f31.png]: /images/20221020/101b0eae9b2e4de69b7adff48eecd689.png
[https_fengyuanchen.github.io_compressorjs]: https://links.jianshu.com/go?to=https%3A%2F%2Ffengyuanchen.github.io%2Fcompressorjs%2F
[https_github.com_fengyuanchen_compressorjs]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Ffengyuanchen%2Fcompressorjs
[74bc7c8f010a30049e686f364a3f4c70.png]: /images/20221020/ddeff8d165454cdfa69f49a23ef5d2c5.png
[https_fengyuanchen.github.io_cropperjs]: https://links.jianshu.com/go?to=https%3A%2F%2Ffengyuanchen.github.io%2Fcropperjs%2F
[https_github.com_fengyuanchen_cropperjs]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Ffengyuanchen%2Fcropperjs
[7fafca7c94e97b433cbc49a94a8096fa.png]: /images/20221020/359129d8cb4744aaa90558392ed0fbc2.png
[https_github.com_lukechilds_merge-images]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Flukechilds%2Fmerge-images
[1f4dad69cd1ff3022a5e624b3b919d1c.png]: /images/20221020/1ce76afcd08643239e6cd2b27d676105.png
[https_benhowdle89.github.io_grade]: https://links.jianshu.com/go?to=https%3A%2F%2Fbenhowdle89.github.io%2Fgrade%2F
[https_github.com_benhowdle89_grade]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fbenhowdle89%2Fgrade
[9f92af516906f2d698345605821859c9.png]: /images/20221020/d46a9adf86d8463193605eeec0de3a6c.png
[Node.js]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.oschina.net%2Fp%2Fnodejs
[http_fabricjs.com]: https://links.jianshu.com/go?to=http%3A%2F%2Ffabricjs.com%2F
[https_github.com_fabricjs_fabric.js]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Ffabricjs%2Ffabric.js
[203ed765117f0f92337c469ea4bfa03f.png]: /images/20221020/8c3a313793c24ffda876ede31cc27ccf.png
[https_www.marvinj.org_en_index.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.marvinj.org%2Fen%2Findex.html
[https_github.com_gabrielarchanjo_marvinj]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fgabrielarchanjo%2Fmarvinj
[a4e8631cc3f832d2f0b824ccf6691725.png]: /images/20221020/25e7ca38d431486ca23a8be2d47b5863.png