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


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

2020 十大 JavaScript 图画处理库

[译] 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

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

2. Lena.jq A C h 7s

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

演示
教程
Github

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

3. Compressor.js

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

演示
Github

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

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

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

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

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

6. Merge Images

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

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

Github

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

7. Cropper.js

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

演示
Github

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

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

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

9. MarvinJ

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

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

官网
Github

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

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

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

希望你喜爱本文。假如你觉得有什么需要补充,请随时~ 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、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译方案、官方微博、知乎专栏。

发表评论

提供最优质的资源集合

立即查看 了解详情