译文:2020的十大JavaScript图像处理库【渡一教育】

694 阅读4分钟

原文翻译自:
https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af,作者:Mahdhi Rezvi 。

如有翻译不准确,请多指正!


使用JavaScript处理图像可能非常困难且繁琐,但值得庆幸的是,有许多可以使处理变得简单的库,以下是我最喜欢的不同类别的库。

如果你在其中发现有用的东西,可以尝试将其包装为所选框架的组成部分。这样,你就拥有了一个带有声明性API的可重用组件,随时可以使用。

你也可以使用文档和代码示例将其发布到Bit.dev之类的云组件中心。发布后,你可以从任何使用它的项目中进行持续更新。

译文:2020的十大JavaScript图像处理库


1.Pica

这个插件可以帮助你减少上传大图片的时间。同时允许你在浏览器中调整图像大小,而无需像素化,并且速度相当快。以及可以帮助你自动选择webworker、webassembly、createImageBitmap和pureJS中最好的可用技术。

译文:2020的十大JavaScript图像处理库


2.Lena.js

这个图像库非常小,但有大约22个图像过滤器,用起来也是相当酷,大家可以试者练练手。大家还可以创建新的过滤器并将其添加到Githubrepo中。

译文:2020的十大JavaScript图像处理库


3.Compressor.js

这是一个简单的JS图像压缩程序,这是使用浏览器本机的简单JS图像压缩器,canvas.toBlobAPI用于处理图像压缩。这让大家可以将压缩输出质量设置为0到1。

译文:2020的十大JavaScript图像处理库


4.Fabric.js

Fabric.js允许你使用JavaScript在网页上的HTML<canvas>元素上轻松创建简单的形状(如矩形,圆形,三角形和其他多边形)或由许多路径组成的更复杂的形状。同时允许大家使用鼠标对这些对象的大小,位置和旋转进行操作。

也可以使用Fabric.js库更改这些对象的某些属性,例如它们的颜色,透明度,网页上的深度位置或选择这些对象的组。js还方便大家将SVG图像转换为JavaScript数据,并用于将其放到<canvas>元素中。

译文:2020的十大JavaScript图像处理库


5.Blurify

这是一个很小的(约2kb)库,用于模糊图片,并具有从CSS模式到画布模式的优雅降级支持。该插件在三种模式下工作:

CSS:使用过滤器属性(默认)

canvas:使用canvas导出base64

Auton:首先使用css模式,否则自动切换到画布模式

而你只需要将图像,模糊值和模式传递给函数,即可简单有效地获得模糊图像。

译文:2020的十大JavaScript图像处理库


6.Merge lmages

这个库可以帮助你轻松地将图像合成在一起,而不会弄乱画布。有时,使用画布可能会有些痛苦,特别是如果您只需要画布上下文来执行相对简单的操作(例如将某些图像合并在一起)。而merge-image将所有重复性任务抽象为一个简单的函数调用。图像可以彼此重叠并重新放置。该函数返回一个Promise,该Promise解析为base64数据URI。同时支持浏览器和Node.js。

译文:2020的十大JavaScript图像处理库


7.Cropper.js

该插件是一个简单的JavaScript图像裁剪器,可让你在交互式环境中裁剪,旋转,缩放和缩放图像。与此同时它还允许设置图像的纵横比。

译文:2020的十大JavaScript图像处理库


8.CamanJS

这是Javascript的画布操作库。这个库同时具有简单易用的界面和先进高效的图像/画布编辑技术。它也很容易通过新的过滤器和插件进行扩展,同时具有广泛的图像编辑功能,同时它还提供了一系列的图像编辑功能。而这些功能还在继续拓展,完全独立于库,可以在NodeJS和浏览器中使用。

最后你可以选择一组预设滤镜或手动更改属性(例如亮度,对比度,饱和度)以获得所需的输出。

译文:2020的十大JavaScript图像处理库


9.MarvinJ

MarvinJ是从MarvinFramework派生的纯JavaScript图像处理框架。MarvinJ对于许多不同的图像处理应用程序而言操作简单却又功能强大。

Marvinh除了可以自动检测特征之外还提供了许多算法来对颜色和外观进行操作。使用基本图像功能(如边缘,拐角和形状)的能力是图像处理的基础。而该插件有助于检测和分析对象的角点,从而确定场景中主要对象的位置。正因为以上功能,该插件同时可以自动裁剪出对象。

译文:2020的十大JavaScript图像处理库


10.grade

这个JS库提供图像中的前2种主要颜色生成的互补渐变。这样一来,你的网站就可以使用从图片中导出的匹配渐变色来填充div标签了。这是一个易于使用的插件,可帮助你保持网站外观的美观。

这个插件是我个人非常喜欢的一个插件,因为我经历了很多麻烦才能获得该插件提供的类似输出。


HTML 文件

译文:2020的十大JavaScript图像处理库


JS 文件

译文:2020的十大JavaScript图像处理库