您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript的图像处理库介绍

时间:2022-11-01 11:02:21  来源:今日头条  作者:三维棱镜prism3dcn

Image Processing in JAVAscript

如果您正在寻找一种在 Web 项目中处理或操作图片的方法,本文则可能值得一看。它们中的大多数都提供基本操作,例如调整亮度和对比度,灰度以及反相和图像,而其他操作主要侧重于易于理解的代码或可扩展性。以下部分将帮助您找出适合您要求的工具。

您可以在每个部分中找到用于调整图像亮度的代码段。这将使您了解如何使用这些库。运行代码的结果如下所示:

 

 

original and result image after increasing the brightness

1. Caman JS

一个众所周知且功能强大的图像处理库是Caman.js。它提供了各种内置功能以及扩展的可能性。此外,该库具有良好的文档记录,可以在NodeJS和浏览器中使用。CamanJS 提供的函数适用于<canvas>元素,因此在开始之前,您可以自己创建画布元素,也可以让 CamanJS 用相同尺寸的画布替换图像。

基本功能包括颜色操作,例如设置对比度/亮度或单独修改RGB通道,以及增加或减少应用于图像的噪点的可能性。高级操作,例如使用图层,混合或裁剪图像可以通过使用插件来实现。

<img id="caman-image" src="otter.jpg" />
  
  <script src="caman.js"></script>
<script>  
    Caman('#caman-image', function () {    
    this.brightness(50).render();  
  });
</script>

2. glfx.js

glfx.js是一个功能强大的工具,它提供了广泛的功能。除了过滤器 2 和卡曼 JS 之外,它还与 WebGL 配合使用。关于这一点的很酷的事情是,图像处理操作是使用图形卡完成的,因此可以实时运行。主要缺点是它仅在较新的浏览器中受支持。

除了基本的调整功能和有趣的效果外,glfx.js还提供了模糊和包装功能的列表。这些可以通过不同的参数进行调整,以创建独特的结果

 

<script src="glfx.js"></script>
<script>  
  window.onload = function () {    
  const canvas = fx.canvas();    
  const image = document.getElementById('glfx-image');
  const texture = canvas.texture(image);
  canvas.draw(texture).brightnessContrast(0.5, 0).update();
  image.parentNode.insertBefore(canvas, image);
  image.parentNode.removeChild(image);  
};
</script>

<img id="glfx-image" src="otter.jpg" />

3. Grafi.js

正如该项目网站上所说,grafi.js是一个应该鼓励用户了解图像处理如何工作的图书馆。源代码可以在Github上找到,并且包含许多注释,可以很容易地理解每个函数中发生了什么。如果您正在寻找可用于高级图像操作的库,grafi.js可能不符合您的需求,但它有助于了解如何实现图像操作并为基本操作获得令人满意的结果。

请注意,grafi.js不提供涉及更改图像方向或大小的操作。

<canvas id="grafi-canvas">
  </canvas>

<script type="text/JavaScript" src="grafi.js"></script>
<script>
    const grafiCanvas = document.getElementById('grafi-canvas');
    let canvas = document.createElement('canvas'); 
    let ctx = canvas.getContext('2d');  
    let original, newImage, imageCtx; 
    let img = new Image(); 
    img.src = 'otter.jpg';
    img.onload = function () {
        canvas.width = img.width;    
        canvas.height = img.height;    
        ctx.drawImage(img, 0, 0);    
      original = ctx.getImageData(0, 0, canvas.width, canvas.height);
      grafiCanvas.width = img.width;    
      grafiCanvas.height = img.height;   
      imageCtx = grafiCanvas.getContext('2d');    
      imageCtx.putImageData(grafi.brightness(original, { level: 100 }), 0, 0); 
    };
</script>

4. Jimp

与Caman.JS一样,Jimp既可以在Node.JS中使用,也可以在浏览器中使用。它不使用 html 元素(<img> 或 <canvas>),而是在图像中读取以进行处理的路径或 URL。

Jimp提供了一个调整颜色的功能列表以及一些效果。它还提供了一些您在其他库中可能错过的操作,例如调整大小,缩放和旋转图像。图片也可以手动或自动裁剪。在 Node 中使用时,Jimp 是一个功能强大的工具,可让您对多个文件执行链接操作并存储修改后的图像。

<script src="jimp.min.js"></script>
<script>  
    Jimp.read('otter.jpg')
  .then(function (lenna) {      
      lenna.brightness(0.5).getBase64(Jimp.MIME_JPEG, function (err, src) {        
          const img = document.createElement('img');       
          img.setAttribute('src', src);        
         document.body.AppendChild(img);     
      });   
})   
.catch(function (err) {      
  console.error(err);    
});
</script>

5. Filtrr2

Filtrr2被描述为一个“易于使用的开箱即用”库,这取决于jQuery。它使用<canvas>元素来处理图像。虽然 Filtrr2 未涵盖某些 CamanJS 操作,但它提供了一些附加功能,例如对图像进行码化或模糊处理。总而言之,所提供的功能和用法与CamanJS相似。

<script type="text/javascript" src="jquery.min.js"/></script>
<script src="filtrr2.js"></script>
<img id="filtrr2-img" src="otter.jpg"/>
  
<script>  Filtrr2('#filtrr2-img', function () {   
     this.brighten(50).render(); 
});
</script>

6. Processing.js
如果您熟悉处理编程语言,此库可能会派上用场。处理允许使用不同的媒体,可用于创建动画,数据可视化和数字艺术,但也可用于图像处理。Processing.js允许您编写处理代码,并通过将其应用于画布元素将其包含在您的网站中即可。

尽管该库提供了一些有用的功能,例如缩放,旋转或混合图像,但灰度缩放或颜色调整等基本操作的解决方案必须由用户实现。从好的方面来说,它是高度可调的,是了解图像处理算法的好方法。

 

总结概述

对比如下

 

 

如您所见,CamanJS提供了各种各样的像素级修改以及可用于图像校正的操作。但是,某些操作(如模糊和锐化)仅受其他库支持,因此您必须根据自己想要执行的操作进行选择。

此列表中唯一支持旋转、翻转和自动裁剪的库是 Jimp。如果您只想调整图像大小或裁剪图像,则可以同时使用CamanJS或Jimp。

如果您正在寻找更抽象的不透明,glfx.js可能是可供选择的库,因为它带有一系列您可以玩的花哨效果,如下图所示。

 

当然,本文中介绍的库并不是唯一值得一看的库,您可能也有兴趣查看其中之一:

  • PAIntbrushJS
  • canvasfilters
  • VintageJS
  • jQuery filter.me
  • JSManipulate
  • Fabric.js


Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  Search: JavaScript  点击:(6)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  Search: JavaScript  点击:(27)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  Search: JavaScript  点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06  Search: JavaScript  点击:(53)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  Search: JavaScript  点击:(71)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11  Search: JavaScript  点击:(99)  评论:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: JavaScript  点击:(91)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  靳国梁    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(26)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(53)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(58)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(71)  评论:(0)  加入收藏
站内最新
站内热门
站内头条