[译] 2020 十大 JavaScript 图像处理库

时间 2020-05-09

原文原文链接

原文地址：10 JavaScript Image Manipulation Libraries for 2020

原文做者：Mahdhi Rezvi

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：IAMSHENSH

校对者：niayyy-S

2020 十大 JavaScript 图像处理库

用 JavaScript 处理图像可能很是困难且繁琐。幸运的是，有许多库能够使这事变得很是简单。如下是我最喜欢的不一样类别的库。javascript

若是你发现有用的东西，尝试将其封装成所选框架的组件。经过这种方式，你将拥有一个具有声明式 API 的可复用组件，并随时可用。css

1. Pica

此插件可助你减少大图的上传大小，从而节省上传时间。它容许你在浏览器中调整图像大小，响应迅速而且不会出现像素化，由于它会从 Web Workers、WebAssembly、createImageBitmap 方法以及纯 JavaScript 中自动选择最佳的可用技术。html

演示 Github前端

2. Lena.js

这个炫酷的图像库虽然很是小，但其大约有 22 个图像滤镜，很是好玩。你还能够向 GitHub 仓库中建立并添加新滤镜。java

演示教程 Githubnode

3. Compressor.js

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

演示 Githubios

4. Fabric.js

Fabric.js 容许你使用 JavaScript 在网页上的 HTML \ <canvas> 元素上轻松建立简单的形状，例如矩形、圆形、三角形和其余多边形，或者由许多路径组成的更复杂的形状。Fabric.js 还容许你使用鼠标来操纵这些对象的大小，位置和旋转。git

也能够使用 Fabric.js 库更改这些对象的属性，例如它们的颜色，透明度，网页上的深度位置，或选择这些对象的组。Fabric.js 还容许你将 SVG 图像转换为 JavaScript 数据，并直接在 \ <canvas> 元素中使用。github

演示教程 Github

5. Blurify

这是一个很小的（约 2kb）库，用于模糊图片，并具备从 css 模式到 canvas 模式的优秀降级支持。该插件在如下三种模式下工做：

css：使用 filter 属性（默认）
canvas：使用 canvas 导出 base64 格式
auto：优先使用 css 模式，不支持则自动转换为 canvas 模式

你只须要将图像，模糊值和模式传递给函数，便可简单有效地得到模糊图像。

演示 Github

6. Merge Images

该库让你能够轻松地合成图像，而不会弄乱画布。有时，使用画布可能会有些痛苦，尤为是在你只须要一个画布上下文来执行相对简单的操做时（例如合并图像）。merge-images 将全部重复性任务抽象为一个简单的函数。

图像能够彼此重叠和调换位置。该函数返回一个 Promise，并 resolve 一个 base64 数据类型的 URI。同时支持浏览器和 Node.js。

Github

7. Cropper.js

该插件是一个简单的 JavaScript 图像裁剪器，容许在可交互的环境中裁剪、旋转和缩放图像。它还容许设置纵横比。

演示 Github

8. CamanJS

这是 JavaScript 的画布操做库。其具备简单易用的接口与先进高效的图像/画布编辑技术。经过新滤镜和插件很容易进行扩展，而且它具备一系列的图像编辑功能，而这种功能还在不断增长。它彻底无依赖，并能够同时在 Node.js 和浏览器中使用。

你能够选择一组预设滤镜或手动更改属性（例如亮度，对比度，饱和度）以得到所需的结果。

演示官网 Github

9. MarvinJ

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

Marvin 除了提供许多算法来控制颜色和外观，还具备自动检测特征的能力。其图像处理能力是基于图像的基础特征（例如边缘、拐角与形状）来实现的。此插件经过检测与分析对象的角点，从而定位场景中主要对象。基于这些功能，让它能够自动裁剪出对象。

官网 Github

10. Grade

此 JavaScript 库从图像中的前 2 种主要颜色生成互补的渐变。这样，你就能够从图像中提取出渐变效果，来填充网站上的 div。这是一个易用的插件，可帮助你保持网站视觉上的优美。

该插件是我我的今后列表中挑选出来的，我经历了许多困难才经过此插件得到相似的输出。

HTML 文件

<!--渐变将应用于这些外部 div，做为背景图像-->
<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>
<div class="gradient-wrap">
    <img src="./samples/good-dinosaur.jpg" alt="" />
</div>
复制代码

JavaScript 脚本

<script src="path/to/grade.js"></script>
<script type="text/javascript"> window.addEventListener('load', function(){ /* 你全部图像容器的节点列表（或单个节点）。 该库将在每一个容器中找到一个 <img /> 来建立渐变。 */ Grade(document.querySelectorAll('.gradient-wrap')) }) </script>
复制代码

演示 Github

但愿你喜欢本文。若是你以为有什么须要补充，请随时评论。

编码愉快！

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。