周末学习发现了 10 个好用JavaScript图像处理库

时间 2020-06-21

标签周末学习发现好用 javascript 图像处理栏目 JavaScript 繁體版

原文原文链接

本文已经做者受权javascript

用 JavaScript 处理图像可能很是困难且繁琐。幸运的是，有许多库可让这些变得简单得多。下面介绍一些图像处理的库。html

1. Pica

pica 可在浏览器上实现高质量并且高性能的图片大小调整JS库，目标是在浏览器中以最快的速度进行高品质图像缩放。它会从web-workers，web assembly，createImageBitmap和纯JS中自动选择最佳的可用技术。java

Pica是一个执行数学计算的底层开发库，尽量地减小了封装带来的影响。若是对二进制图像进行缩放，须要先加载到canvas（再保存为blob）。node

该库主要为图片添加过滤器。面试

Compressor.js 一个JavaScript图像压缩器。使用浏览器的原生canvas.toBlob API来执行压缩工做，这意味着它是有损压缩。通常使用此方法在客户端上传图像文件以前对其进行预压缩。

Fabric是一个强大而简单的JS Canvas库，咱们能经过使用它实如今Canvas上建立、填充图形、给图形填充渐变颜色。组合图形（包括组合图形、图形文字、图片等）等一系列功能。简单来讲咱们能够经过使用Fabric从而以较为简单的方式实现较为复杂的Canvas功能

还可使用Fabric.js库更改这些对象的某些属性，例如它们的颜色，透明度，网页上的深度位置，或选择这些对象的组。 Fabric.js还能够将 SVG 图像转换为 JavaScript数据，该数据可用于将其放入<canvas>元素。

blurify.js是一款小巧实用的js图片模糊效果插件。使用该js插件能够将任意图片进行模糊处理。

该库使能够轻松地将图像合成在一块儿。有时，使用画布可能会有些繁琐，特别是若是你只须要画布上下文来作相对简单的事情(例如将一些图像合并在一块儿)时。

merge-images将全部重复性任务抽象为一个简单的函数调用。图像能够彼此重叠并从新放置。该函数返回一个Promise，该Promise解析为base64数据URI。同时支持浏览器和Node.js。

cropperjs是一款很是强大却又简单的图片裁剪工具，它能够进行很是灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。

CamanJS 是一个基于 Canvas 处理图片的 Javascript 库，结合简单易用的接口和先进高效的图像编辑技术。CamanJS 很容易扩展新的过滤器和插件，并伴随着一系列普遍的图像编辑功能。它是彻底独立的库，支持工做在 NodeJS 和浏览器。

MarvinJ是从 Marvin Framework 派生的纯 JavaScript 图像处理框架。 MarvinJ 对于许多不一样的图像处理应用程序而言既简单又强大。

Marvin 提供了许多算法来操纵颜色和外观。 Marvin 还能够自动检测功能。使用基本图像功能（如边缘，拐角和形状）的能力是图像处理的基础。该插件有助于检测和分析对象的角点，从而肯定场景中主要对象的位置。因为这些缘由，能够自动裁剪出对象。

grade.js是一款能够根据图片的两种主要颜色生成背景渐变的JS插件。它的原理是提取图片的两种主要颜色，而后使用这两种颜色为渐变的开始和结束颜色，应用在图片容器上。

做者：Mahdhi Rezvi 译者：前端小智来源：medium

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

文章每周持续更新，能够微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。