• 原文地址：10 JavaScript Image Manipulation Libraries for 2020
• 原文作者：Mahdhi Rezvi
• 译文出自：掘金翻译方案
• 本文永久链接：github.com/xitu/gold-m…
• 译者：IAMSHENSH
• 校对者：R m ~ Uniayyy-S

2020 十大 JavaScript 图画处理库

用 JavaScript 处理图画或许 e l b c十分困难且繁琐。走运的是，有许多库能够使这事变得十分简略。以下是我最. J i喜爱的不同类别的库。

假如你发现有用的东西，测验将其封装成所选结构的组件。经过这种方式O k b K 5，你将具有一个具有声明式 API 的可. t – # ^ m S复用组件，并随时可用。5 7 C M 3 ~

1. PicW 1 l S r L 2 L /a

此插件可助; v k L y q s你减小大图的上传巨细，然后节省上传时间。它答应你在浏览器中调整图画巨细，响应敏捷而且不会呈现像素化，由于它会从 Web Workers、WebAssembly、createS : N ZImageBb ] Citmap 方法以及纯 JavaScript 中自动选择最佳的可用技术。

演示
Github

2. Lena.jq A C h 7s

这个炫酷的图画库虽然十分小，但其大约| S ; x } M & f有 22S r N ? ~ 9 J 个图画滤镜，十分好玩。你还能够向 GitHub 仓库中创立并增加新滤镜。

演示
教程
Github

3. Compressor.js

这是一b i K个简略的 JavaScript 图画压缩器，它运用浏览器原生的 canvas.toBlob API 来处理图画压缩。这使你能够在 0 到 1 之间设置压缩输出质量。

演示
Github

4. Fabric.js

Fabric.js 答应你运用 JavaScript 在网页上的 HTML <canvas> 元素上轻松创立简略的形状，例如矩L 6 u ^ X x V T p形、圆形、三角形和其他多边形，/ H {或者由 7 ~ z z g X许多途径组成的更杂乱的形状。Fabric.js 还答应你运用鼠标来操纵这些目标的巨细，方位和旋转。

也能够运用 Fabric.js 库更改这些目标的特点，例如它们的色彩，透明度，网页上的深度k x | Y方位，或选择这些目标的组j t I { # f m c。Fabric.js 还答应你将 SVG 图画转换为 JavaScript 数据，并直接在 && S 0lt;canI W :vas> 元素中运用。

演示
教, 9 E m – z = W Q程
Github

5. BluF ` Arify

这是一个很小的G , D b M X 4（约 2kb）库，用于含糊图片，并具有从 css 形式到 canvas 形式的优异降级支持。该插件在以下三种形式下作业：

• css：运用 filter 特点（默认）
• canvas：运用 canvas 导出 base64 格式
• auto：优先运用 css 形式，不` P ) Q支持则自动转换为 canvas 形式

你只B ] 1 W q C k需要将图画，含糊值和形p f – R D x I Q B式传递给函数，G j 9 y C B P s即可简略有效地取得含糊图画。

演示
Githu6 ( z 2b

6. Merge Images

该库让你^ J ~ 9 Q – { d Y能够轻松地合成图画，而不会弄乱画布。有时，运用画布或许会有些苦楚，尤其是在你只需要一个画布上下文来执行相对简略的操作时（例如合并图画）。merge-images 将所有重复性任务抽象为一个简略的函数。

图画能够互相重叠和 1 a T x q 1 b K调换方位。该函数回来一; . h v F ( C [个 Promise，并 resolve 一T L ? { C x ) d个 basS 9 @ }e64 数据类型的 URI。一起支持浏览器和 Node.js。

Github

7. Cropper.js

该插件是一个简略的 JavaR ) z ~ [Script 图画裁剪器，答应在可交互的环境中裁剪、旋转和缩放图画。它还答应设置纵横比。

演示
Github

8. CamanJS

这是 JavaSca 1 q o !ript3 7 O 的画布操作库。其具有简略易用的i b ) 5 ^接口与先进高效的图画/画布修正技术。经过新滤镜和插件很容易进行扩展，而且它具有一: m a b 1 | 4 7系列的图画修正功用，而这种功用还在不断增加。它完全无依靠，并能够一起在 Node.js 和浏览器中运用。

你能够选择一组预设滤镜或手动更改特点（例如亮度，对比度，饱和度）以取得所6 h l S G需的成果。

演示
官网
Github

9. MarvinJ

MarvinJ 是d i @ o 0 G }派生自 Marvin 结构的纯 JavaScript 图画处理结构。MarvinJ 对于许多不同的图画处理应用程序而言，既简略又强壮。

Marvin 除了供给许多算法来控制色彩和外观，还具有自动检测特征的才能。其图画处理才能是根据图画的根底特征（例如边缘、拐角与形状）来实现的。此插件经过检测与分析目标` 2 U 7 @ B o的角点，然后定位场景中主要目标。根据这些功用，让它能够自动裁剪出目标。

官网
Github

10. Grade

此 JavaScriptU x t x 库从图画中的5 c Y ( F I前 2 种主要色彩生成互补的突变。这样，你就能够从图画中提取出突变作用，来填充网站上的 div。这是一个易用的插件，可协助你保持网站视觉上的美丽。

该插件是我个人从此列表中挑选出来的，我4 r 7 D W阅历了许多困难才经过此插件取得相似的输出。

HTML 文件

<!--突变将应用于这些外部 div，作为布景图画-->
<div class="gradient$ B N C b q S-wrapt F ~ L X X H L">
<img src="./samples/findin$ B & = Og-dory.jpg" alt="" />
&5 s 5 R C @ ^lt;/div>
<div class="gradient-wrapC z Y $ 9">
<img src="./samples/good-dinosaur.jpg* E F ; j 7 i 8 o" alt="" />
</div>

JavaScript 脚本

<script src="path/t( a , u Z 2o/grade.js"></script>
<script type="text/javascrie ) ] X opt">
window.addEventListener('load', fun8 * U rction(){
/*
你所有图画容器的节点列表（或单个节点）。
该库将在每个容器中找到一个 <img /> 来创立突变。
*/
Grade(document.querySelectorAll('.gra! i L f @  Z R Ydient-wrap'))
})
</script>

演示
Github

希望你喜爱本文。假如你觉得有什么需要补充，请随时~ l | ( l _ D U W谈论。

编码愉快！

假如发现译文存在过错或其他需要改善的* ` y – 3 c 6当地，欢迎到 掘金翻译方案 对译文进行修正并 PR，也可取得相应奖赏` g 8 V ^积分。文章最初的 本文永久链接 即为本文在 GitHub 上的 MarkDowu B u Hn 链接。

掘金翻译方案 是一个翻译优质互联网技术文章的社区，文章来} ` o g 7 M R历为 掘金 上的英文分享文章。内容覆盖 Android、iOSH 0 Q i J n ] ` r、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译方案、官方微博、知乎专栏。