10个JavaScript图像解决库,收藏好留备用

作者 : 开心源码 本文共2584个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共167人阅读

用JavaScript解决图像可能非常困难且繁琐。幸运的是,有许多库可以使事情变得简单得多。以下就是我最喜欢的少量图片解决库。

假如发现有用的东西,请尝试将其包装为所选框架的组成部分。这样,你将拥有一个具备公告式API的可重用组件,随时可以使用。

1、Pica

此插件可帮助你减小大图像的上传文件大小,从而节省上传时间。使你可以在浏览器中调整图像大小,而不会出现像素化并且相当快。它会从网络工作者,网络程序集,createImageBitmap和纯JS中自动选择最佳的可用技术。

Demo:http://nodeca.github.io/pica/demo/

Github: nodeca/pica

2、Lena.js

这个很酷的图像库很小,但有22个图像滤镜,非常好玩。你还可以创立新过滤器并将其增加到Github存储库。

Demo:https://fellipe.com/demos/lena-js/

讲解:https://ourcodeworld.com/articles/read/515/how-to-add-image-filters-photo-effects-to-images-in-the-browser-with-javascript-using-lena-js

Github: davidsonfellipe/lena.js

3、Compressor.js

这是一个简单的JS图像压缩器,它使用浏览器的本机canvas.toBlob API来解决图像压缩。这使你可以将其压缩输出,质量设置为0到1。

Demo:https://fengyuanchen.github.io/compressorjs/

Github: fengyuanchen/compressorjs

4、Fabric.js

Fabric.js允许你<canvas>使用JavaScript在网页的HTML 元素上轻松创立简单的形状(如矩形,圆形,三角形和其余多边形)或者由许多路径组成的更复杂的形状。而后,Fabric.js将允许您使用鼠标来操纵这些对象的大小,位置和旋转。

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

Demo:http://fabricjs.com/

教程:http://fabricjs.com/articles/

Github: fabricjs/fabric.js

5、图片模糊化

这是一个很小的(0〜2kb)库,用于模糊图片,并在各css模式之间提供了降级支持canvas。该插件在以下三种模式下工作:

css:使用filterproperty(default)

canvas:使用canvas导出base64

auto:css首先使用模式,否则canvas自动切换到模式

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

Demo:https://justclear.github.io/blurify/

Github: JustClear/blurify

6、图像合并

该库可以帮助你轻松地将图像合成在一起,而不会弄乱画布。有时,使用画布可能会有些困难,尤其是在你只要要画布上下文来执行相对简单的操作(例如将某些图像合并到一起)时。merge-images将所有重复性任务笼统为一个简单的函数调用。

图像可以彼此重叠并重新放置。该函数返回一个Promise,该Promise解析为base64数据URI。同时支持浏览器和Node.js。

Github: lukechilds/merge-images

7、Cropper.js

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

Demo:https://fengyuanchen.github.io/cropperjs/

Github: fengyuanchen/cropperjs

8、CamanJS

它是Javascript的画布操作库。它结合了易于使用的界面和先进,高效的图像/画布编辑技术。使用新的过滤器和插件很容易进行扩展,并且它具备广泛的图像编辑功能,并且这种功能还在不断增长。它完全独立于库,并且可以在NodeJS和浏览器中使用。

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

Demo:http://camanjs.com/examples/

官网:http://camanjs.com/

Github: meltingice/CamanJS/

9、MarvinJ

MarvinJ是派生自Marvin Framework的纯JavaScript图像解决框架。MarvinJ对于许多不同的图像解决应用程序而言既简单又强大。

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

官网:https://www.marvinj.org/en/index.html

Github: gabrielarchanjo/marvinj

10、Grade

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

这个插件是我个人非常喜欢的一个插件,由于我经历了很多麻烦才能取得该插件提供的相似输出。

HTML文件:

JS文件:

Demo:https://benhowdle89.github.io/grade/

Github: benhowdle89/grade

总结

希望你喜欢这篇文章。也欢迎你随时留下你的评论。编码愉快!

小编也在前台混了有几年,整理了少量学习资料,对web开发技术感兴趣的同学欢迎加入新建的Q群:603985993,不论你是小白还是大牛我都欢迎,希望大家诚心交流!还有大牛整理的一套高效率学习路线和教程与您免费分享,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前台技术!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 10个JavaScript图像解决库,收藏好留备用

发表回复