背景

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

代码

直接上代码

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

/**
 * 判断png图片是否存在透明像素
 *
 * @param {*} pngPath png图片路径
 * @param {number} [limit=255] 透明像素点限度,默认小与255视为透明像素
 * @param {boolean} [isToJpg=false] 如果没有透明像素是否转化为jpg图片
 * @returns
 */
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图片透明像素内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

如何使用Node.js判断png图片是否存在透明像素的更多相关文章

  1. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  3. Node.js调试技术总结分享

    Node.js是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome's JavaScript runtime,也就是说,实际上它是对Google V8引擎(应用于Google Chrome浏览器)进行了封装。 今天介绍Node.js调式目前有几种技术,需要的朋友可以参考下。

  4. node.js实现http服务器与浏览器之间的内容缓存操作示例

    这篇文章主要介绍了node.js实现http服务器与浏览器之间的内容缓存操作,结合实例形式分析了node.js http服务器与浏览器之间的内容缓存原理与具体实现技巧,需要的朋友可以参考下

  5. 教你如何使用node.js制作代理服务器

    本文介绍了如何使用node.js制作代理服务器,图文并茂,十分的详细,代码很简洁易懂,这里推荐给大家。

  6. node.js中的fs.openSync方法使用说明

    这篇文章主要介绍了node.js中的fs.openSync方法使用说明,本文介绍了fs.openSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下

  7. Node.js+ELK日志规范的实现

    这篇文章主要介绍了Node.js+ELK日志规范的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. node.js爬虫框架node-crawler初体验

    这篇文章主要介绍了node.js爬虫框架node-crawler的相关资料,帮助大家利用node.js进行爬虫,感兴趣的朋友可以了解下

  9. node.js中的fs.existsSync方法使用说明

    这篇文章主要介绍了node.js中的fs.existsSync方法使用说明,本文介绍了fs.existsSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下

  10. 说说如何利用 Node.js 代理解决跨域问题

    这篇文章主要介绍了Node.js代理解决跨域问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部