怎么使用node . js判断png图片是否存在透明像素 - 行业资讯

　　介绍

这篇文章主要介绍怎么使用Node . js判断png图片是否存在透明像素,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

背景

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

代码

import canvas 得到& # 39;帆布# 39;; 　　import fs 得到& # 39;fs # 39;;/* * 　　,*判断png图片是否存在透明像素　　,* 　　,* @param {*}, pngPath png图片路径　　,* @param {号码},[限制=255],透明像素点限度,默认小与255年视为透明像素　　,* @param {布尔},(isToJpg=false),如果没有透明像素是否转化为jpg图片　　,* @returns 　　,*/function hasOpacity (pngPath, limit =, 255年,isToJpg =, false), {//,才能获取图片的缓冲区　　const 才能;buffer =, fs.readFileSync (pngPath);//才能,图片的宽度存在缓冲区的第17到20个字节　　const 才能;width =, buffer.readUInt32BE (16);//才能,图片的宽度存在缓冲区的第21到24个字节　　const 才能;height =, buffer.readUInt32BE (20);//,才能创建一个画布　　const 才能;pngCanvas =, canvas.createCanvas(宽度,高度);//,才能拿到画笔　　const 才能;context =, pngCanvas.getContext (& # 39; 2 d # 39;);//,才能创建一张图片　　const 才能;img =, new canvas.Image ();//,才能记载图片　　时间=img.src 才能;缓冲;//,才能使用画笔把图片画在画布上　　context.drawImage才能(img, 0, 0,,宽度,高度);//,才能获取png图片的数据的像素数据　　let 才能;res =, context.getImageData(0, 0,宽度,高度); 　　let 才能;imgData =, res.data;//才能,每个像素占用4个字节,计算出一共有多少像素//才能,(r, g, b, a] 　　let 才能;piexCount =, imgData.length /, 4;//才能,是否已经找到透明像素　　let 才能;isOpacity =,假; 　　　　for 才能;(let 小姐:=,0;,小姐:& lt;, piexCount;,我+ +),{ 　　,,,//,遍历每个像素点,找透明通道　　,,,let opacity =, imgData[小姐:*,4,+,3]; 　　,,,if (opacity & lt;,限制),{ 　　,,,,,,,//,如果小于极限,则存在透明像素,退出　　,,,,,isOpacity =,真的; 　　,,,,,休息; 　　,,,} 　　,,}//才能,如果不存在透明像素且isToJpg为真,则转化为jpg格式的图拍呢　　if 才能;(! isOpacity ,,, isToJpg), { 　　,,,const out =, fs.createWriteStream (pngPath.split(& # 39; # 39;公司)[0],+,& # 39;jpg # 39;); 　　,,,pngCanvas.createJPEGStream () .pipe(出); 　　,,,out.on(& # 39;完成# 39;,,(),=祝辞,console.log (pngPath, & # 39;转成jpg成功& # 39;)); 　　,,}//,才能返回　　return 才能;isOpacity; 　　} 　　　　console.log (hasOpacity (& # 39; hh.png& # 39;,, 254,,真的)); 　　console.log (hasOpacity (& # 39; jj.png& # 39;));

<强>原理:

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

<强>疑问?为什么有个限制参数?

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