iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用Node.js判断png图片是否存在透明像素
  • 268
分享到

如何使用Node.js判断png图片是否存在透明像素

2024-04-02 19:04:59 268人浏览 泡泡鱼
摘要

背景 png格式的图片存储空间会比jpg格式的图片大,但是png图片的质量明显更好。有时候并不需要图片的质量非常的好,但是为了减少包体,需要做一些优化,比如压缩图片,把没有带透明像

背景

png格式的图片存储空间会比jpg格式的图片大,但是png图片的质量明显更好。有时候并不需要图片的质量非常的好,但是为了减少包体,需要做一些优化,比如压缩图片,把没有带透明像素的png图片转化成jpg格式的图片。这片文章主要来讲讲怎么利用node.js来检测没有带透明像素的png图片,以及如何把它转化成jpg图片。

代码

直接上代码


import canvas from 'canvas';
import fs from 'fs';


function hasOpacity(pngPath, limit = 255, isToJpg = false) {
  // 获取图片的buffer
  const buffer = fs.readFileSync(pngPath);

  // 图片的宽度存在buffer的第17到20个字节
  const width = buffer.readUInt32BE(16);
  // 图片的宽度存在buffer的第21到24个字节
  const height = buffer.readUInt32BE(20);

  // 创建一个画布
  const pnGCanvas = canvas.createCanvas(width, height);
  // 拿到画笔
  const context = pngCanvas.getContext('2d');
  // 创建一张图片
  const img = new canvas.Image();
  // 记载图片
  img.src = buffer;
  // 使用画笔把图片画在画布上
  context.drawImage(img, 0, 0, width, height);

  // 获取png图片的数据的像素数据
  let res = context.getImageData(0, 0, width, height);
  let imgData = res.data;
  // 每个像素占用4个字节,计算出一共有多少像素
  // [r, g, b, a]
  let piexCount = imgData.length / 4;

  // 是否已经找到透明像素
  let isOpacity = false;

  for (let i = 0; i < piexCount; i++) {
    // 遍历每个像素点,找透明通道
    let opacity = imgData[i * 4 + 3];
    if (opacity < limit) {
        // 如果小于limit,则存在透明像素,退出
      isOpacity = true;
      break;
    }
  }

  // 如果不存在透明像素且isToJpg为true,则转化为jpg格式的图拍呢
  if (!isOpacity && isToJpg) {
    const out = fs.createWriteStream(pngPath.split('.')[0] + '.jpg');
    pngCanvas.createJPEGStream().pipe(out);
    out.on('finish', () => console.log(pngPath, '转成jpg成功'));
  }

  // 返回
  return isOpacity;
}

console.log(hasOpacity('hh.png', 254, true));
console.log(hasOpacity('jj.png'));

原理:

canvas采用四个字节存放像素,[r, g, b, a],分别代表红色通道,绿色通道,蓝色通道,透明通道。每个字节是8位,所以每个通道的数据是0~255之间,就透明通道而言,255表示完全不透明,0表示完全透明。我们利用node.js的buffer和canvas把png图片转化成一个个像素点的数据,然后通过遍历每个透明通道,就可以找到png图片是否带有透明像素。

疑问?为什么有个limit参数?

这是因为在实际应用中,有可能存在少量254、253的透明通过,这些看起来就跟完全不透明的像素一样,所以把他们也当作不是透明像素处理。这个根据自己能够接受的限度去传参。

实例图片

带透明像素

不带透明像素

canvas

关于canvas的更多使用,请参考 www.npmjs.com/package/can…

总结

到此这篇关于如何使用Node.js判断png图片是否存在透明像素的文章就介绍到这了,更多相关Node.js判断png图片透明像素内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何使用Node.js判断png图片是否存在透明像素

本文链接: https://www.lsjlt.com/news/131692.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用Node.js判断png图片是否存在透明像素
    背景 png格式的图片存储空间会比jpg格式的图片大,但是png图片的质量明显更好。有时候并不需要图片的质量非常的好,但是为了减少包体,需要做一些优化,比如压缩图片,把没有带透明像...
    99+
    2024-04-02
  • 怎么使用Node.js判断png图片是否存在透明像素
    这篇文章主要介绍怎么使用Node.js判断png图片是否存在透明像素,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!背景png格式的图片存储空间会比jpg格式的图片大,但是png图片的质量明显更好。有时候并不需要图片的...
    99+
    2023-06-20
  • 如何判断cdn上的图片是否存在
    首先,在浏览器中进入一个网站,按“F12”进入开发调试工具,获取到图片的URL地址;使用组合键“win+R”运行“cmd”,进入DOS窗口;在DOS窗口中输入:nslookup + URL地址,进行查询;最后,在Address栏中,如出现多...
    99+
    2024-04-02
  • jQuery如何判断元素是否存在
    这篇文章主要介绍了jQuery如何判断元素是否存在,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。判断元素是否存在<script&nbs...
    99+
    2024-04-02
  • 如何用Go判断元素是否在切片中
    目录1.问题2.遍历查询3.map 查询4.性能对比5.转换通用化6.借助开源库 golang-set7.小结参考文献1.问题 如何判断元素是否在切片中,Golang 并没有提供直接...
    99+
    2024-04-02
  • jquery如何判断dom元素是否存在
    这篇文章主要介绍jquery如何判断dom元素是否存在,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! jquery判断dom元素是否存在的方法:1、使用“...
    99+
    2024-04-02
  • jquery如何判断form元素是否存在
    这篇文章主要讲解了“jquery如何判断form元素是否存在”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何判断form元素是否存在”吧! ...
    99+
    2024-04-02
  • 使用JavaScript怎么判断元素是否存在
    这篇文章给大家介绍使用JavaScript怎么判断元素是否存在,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,...
    99+
    2023-06-14
  • jQuery如何判断一个元素是否存在
    这篇文章主要介绍了jQuery如何判断一个元素是否存在,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。判断一个元素是否存在if ($('#someDiv...
    99+
    2023-06-27
  • jquery如何判断数组元素是否存在
    在jquery中判断数组元素是否存在的方法:1.新建html项目,引入jquery;2.在项目中定义数组;3.使用$.inArray方法判断元素是否存在;具体步骤如下:首先,在新建一个html项目,在项目中引入jquery;<scri...
    99+
    2024-04-02
  • 如何使用 JavaScript判断HTML是否存在
    在web开发中,我们经常需要根据特定的条件对HTML网页进行操作。有时候我们需要确定网页中是否存在特定的 HTML 元素。在这种情况下,使用 JavaScript 是一个不错的选择。本文将介绍如何使用 JavaScript 判断 HTML ...
    99+
    2023-05-14
  • jquery如何判断指定子元素是否存在
    这篇文章主要讲解了“jquery如何判断指定子元素是否存在”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何判断指定子元素是否存在”吧! ...
    99+
    2024-04-02
  • javascript数组如何判断是否存在某元素
    这篇文章给大家分享的是有关javascript数组如何判断是否存在某元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器...
    99+
    2023-06-14
  • jquery如何根据id判断元素是否存在
    这篇文章主要介绍“jquery如何根据id判断元素是否存在”,在日常操作中,相信很多人在jquery如何根据id判断元素是否存在问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • 用javascript判断图片是否存在_不存在则显示默认图片的代码
    在网站或应用中,有时候我们需要显示一张图片,但不确定该图片是否存在或者在服务器上是否被删除。这时候,如果直接显示该图片,可能会出现错误的情况。为了解决这个问题,我们可以使用Javascript代码来判断图片是否存在,在图片不存在的情况下,显...
    99+
    2023-05-14
  • linux如何判断用户是否存在
    本篇内容介绍了“linux如何判断用户是否存在”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!linux判断用户是否存在的方法:1、将“rea...
    99+
    2023-06-22
  • JavaScript如何判断数组是否存在指定元素
    这篇文章给大家分享的是有关JavaScript如何判断数组是否存在指定元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 JS中,可以使用some()...
    99+
    2024-04-02
  • python中如何判断字典中的元素是否存在
    本文小编为大家详细介绍“python中如何判断字典中的元素是否存在”,内容详细,步骤清晰,细节处理妥当,希望这篇“python中如何判断字典中的元素是否存在”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。判断字典中...
    99+
    2023-07-02
  • Golang 如何判断数组某个元素是否存在 (isset)
    如,现在需要判断命令行是否传了参数,即 os.Args[1] 是否存在 如果使用下述的判断: package main import ( "fmt" "os" ) fu...
    99+
    2024-04-02
  • php如何判断数组里面是否存在某元素
    本篇内容介绍了“php如何判断数组里面是否存在某元素”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php判断数组里面是否存在某元素的方法:1...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作