10大Js图像处理库

更新日期: 2020-03-12阅读: 1.8k标签: 

介绍

对于很多人来说,使用Javascript来处理图像不是一件非常简单的事情,幸运的是我们可以借助第三方的库来实现我们想要的功能,本篇文章就介绍一有哪些Javascript图片处理库可供我们选择和使用!以下排名不分先后


1. Pica

此插件可减小大图像的上传大小,从而节省上传时间。它可以在浏览器中调整图像大小,而不会出现像素化现象并且相当快。它会从web-workers, web assembly, createImageBitmap and 纯JS自动选择 优秀 的可用技术

  • 减小大图像的上传大小,节省上传时间;
  • 在图像处理上节省服务器资源;
  • 在浏览器中生成缩略图;

https://github.com/nodeca/pica


2. Lena.js

这是一个包含22个滤镜的图像处理库

https://github.com/davidsonfellipe/lena.js


3. Compressor.js

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

https://github.com/fengyuanchen/compressorjs


4. Fabric.js

Fabric.js允许使用JavaScript在网页上的html <canvas>元素上轻松创建简单的形状,例如矩形,圆形,三角形和其他多边形,或者由许多路径组成的更复杂的形状。然后,Fabric.js将允许使用鼠标来操纵这些对象的大小,位置和旋转。还可以使用Fabric.js库更改这些对象的某些属性,例如颜色,透明度,网页上的深度位置,或选择这些对象的组。Fabric.js还允许将SVG图像转换为JavaScript数据,该数据可用于将其放入<canvas>元素。

https://github.com/fabricjs/fabric.js


5. Blurify

用于模糊图片,并具有从css模式到canvas模式的优雅降级支持。该插件在三种模式下工作:

  • css: 使用filter属性
  • canvas: 使用canvas导出base64
  • auto: css模式优先, 否则自动切换到canvas模式

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

https://github.com/JustClear/blurify


6. Merge Images

该库使可以轻松地将图像合成在一起。有时,使用画布可能会有些繁琐,特别是如果你只需要画布上下文来做相对简单的事情(例如将一些图像合并在一起)时。merge-images将所有重复性任务抽象为一个简单的函数调用。图像可以彼此重叠并重新放置。该函数返回一个Promise,该Promise解析为base64数据URI。同时支持浏览器和Node.js。

https://github.com/lukechilds/merge-images


7. Cropper.js

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

https://github.com/fengyuanchen/cropperjs


8. CamanJS

它是Javascript的canvas操作库。它是易于使用的界面与先进,高效的图像/canvas编辑技术的结合。使用新的过滤器和插件很容易进行扩展,并且它具有广泛的图像编辑功能,并且这种功能还在不断增多。它完全独立于库,并且可以在NodeJS和浏览器中使用。可以选择一组预设滤镜或手动更改属性(例如亮度,对比度,饱和度)以获得所需的输出。

https://github.com/meltingice/CamanJS/


9. MarvinJ

MarvinJ是从Marvin Framework派生的纯JavaScript图像处理框架。MarvinJ对于许多不同的图像处理应用程序而言既简单又强大。Marvin提供了许多算法来操纵颜色和外观。Marvin还具备自动检测功能。使用基本图像功能(如边缘,拐角和形状)的能力是图像处理的基础。该插件有助于检测和分析对象的角点,从而确定场景中主要对象的位置。正因为如此,可以自动裁剪出对象。

https://github.com/gabrielarchanjo/marvinj


10. Grade

该JS库产生从所提供图像中的前2种主要颜色生成的互补渐变。这样一来,网站就可以使用从图片中导出的匹配渐变填充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> 
<script src="path/to/grade.js"></script> 
<script type="text/javascript"> 
 window.addEventListener('load', function(){ 
 Grade(document.querySelectorAll('.gradient-wrap')) 
 }) 
</script> 

https://github.com/benhowdle89/grade

链接: https://www.fly63.com/article/detial/8967

JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?

一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中断。鉴于有问题的代码是广泛使用的 MooTools 库的一部分,很可能会有更多网站受到影响。

15个有趣的Javascript 和CSS库

让你了解到新兴和酷炫的web 开发趋势. 精心挑选发布一些认为大家值得关注的库:Direction Reveal、Carbon、Аxios、Jarvis、Toast UI Editor、Micron.js、lit

math.js_灵活强大的JavaScript数学库

math.js是一个广泛应用于JavaScript 和 Node.js的数学库,它的特点是灵活表达式解析器,支持符号计算,内置大量函数与常量,并提供集成解决方案来处理不同的数据类型,如数字,大数字,复数,分数,单位和矩阵。

12 个评估 JS 库你需要关心的事

当你调研一个 JS 库,功能当然是最重要的。作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性,稳定性,性能,包生态,社区,学习曲线,文档,工具,发展历史,团队,兼容性,趋势

在使用新的JavaScript库时需要考虑的12件事

对于今年的JavaScript状态调查,我想深入挖掘一下,不仅知道人们正在使用哪些工具和库,还要为什么他们选择使用它们。这意味着我必须找到一种方法将个人偏好转化为冷酷的数据。

React Native 常用的 15 个库

本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。

10个有趣的javascript和css库

我们的使命是让您了解最新和最酷的Web开发趋势。下面为大家分享10个有趣的javascript和css库:Tessaract.js强大的javascript(节点和浏览器)库,用于从图像中提取文本。

5个功能丰富的交互式Js库

在javascript的帮助下,可以为几乎每个领域(如移动、桌面应用程序和游戏Web开发)创建Web应用程序,因为该编程语言用作服务器端编程语言以实现最大功能,所以它是一种很好的编程语言。在本文中,我们选择了一些最佳的javascript库汇总

Js常用的动态效果库有那些?

当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。经过一番研究,我收集了 11 个最好的库,你可以用在自己的项目中。另外我还添加了一些有用但是缺少持续维护的库

10 个实用的 Vue.js 工具和库

如今 Vue 的热度不断攀升,使用者越来越多,Vue.js 工具也随处可见。这种现象不是凭空产生的:Vue 的学习曲线友好,功能驱动的结构清晰易懂,文档出色易学,所以新人入门很容易,经验丰富的开发人员也可以快速从其他框架

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!