PNG图片压缩-UPNG.js参数说明及示例

UPNG.js是一个非常轻量且高效的库，用于处理PNG图像。它可以编码和解码PNG图片，同时支持压缩和解压缩功能。特别适合在前端项目中处理图像，尤其是在需要优化图像大小而不牺牲质量时。

UPNG.encode()函数是UPNG.js中用于将图像数据编码成PNG格式的函数，参数如下：

UPNG.encode(imgs, w, h, cnum, dels, forbidPlte)

imgs：图像数据。它是一个Uint8Array数组的数组，其中每个Uint8Array代表一个图像帧的RGBA像素数据。

w（width）：生成的PNG图像的宽度（以像素为单位）。

h（height）：生成的PNG图像的高度（以像素为单位）。

cnum：颜色数量。这个参数决定了输出PNG的颜色深度。比如，将其设置为256会生成8位颜色的PNG图像。特别地，设置为0会让UPNG.js自动选择最优的颜色数量。

dels：帧延时数组，仅当imgs包含多个帧以生成动画PNG时有效。每个元素代表对应帧的延时时间（以毫秒为单位）。

forbidPlte（可选）：这是一个布尔值参数，当设置为true时，会禁止生成带有调色板（palette）的PNG。调色板PNG通常用于压缩图像大小而不是质量，但不是所有场景都需要或希望使用调色板。

 

• 低颜色复杂度：如果你的图像具有很少的颜色（例如图标、简单图形、拥有大块单色区域的图片），则使用较低的cnum值（比如16、64或128）可能是合适的。这样可以减小文件大小，同时保持质量。
• 高颜色复杂度：对于颜色渐变丰富、细节复杂的照片，低cnum值可能导致质量明显下降。对于这类图片，较高的cnum值或者自动选择（cnum=0）更合适。
• 网页用途：对于网页用途，你可能希望图像尽可能小以加快页面加载速度。开始可以尝试中等cnum值（如256），根据结果调整或考虑自动选择。
• 打印或高质量展示：当图像质量是首要考虑时，应优先考虑较高的cnum值，甚至自动选择，以尽可能保留原图的质量和细节。

 

当cnum设置为0时，UPNG.js试图自动确定最佳颜色数以平衡大小和质量，但这并不总能得到最小文件大小。因为自动选择可能会倾向于保留更多的颜色以保证质量，而这有时会导致文件大小的增加，尤其是对于本来就有很多颜色的图片。

 

cnum（颜色数量）的取值范围是从0到32767。具体取值范围如下：

• 0：自动选择颜色数量，UPNG.js将尝试自动确定最佳的颜色数量以平衡文件大小和图像质量。
• 1 - 255：指定一个固定的颜色数量。较小的值会产生更小的文件大小，但可能会降低图像质量。
• 256 - 32767：当cnum大于255时，UPNG.js将尝试最小化文件大小，同时保持足够高的图像质量。

 

示例：

function handlePNG(file) {

  const reader = new FileReader();

  reader.onload = function (e) {

      try {

          const arrayBuffer = e.target.result;

          const decodedImg = UPNG.decode(arrayBuffer); // 解码

          const rgba = UPNG.toRGBA8(decodedImg); // 转换为RGBA数组，每个帧一个元素

          // 压缩和重编码图像，颜色值可根据实际需求调整

          const compressedArrayBuffer = UPNG.encode(rgba, decodedImg.width, decodedImg.height, 0);

          // 处理压缩后的图像

          // 例如，将其转换为Blob，然后URL.createObjectURL可以用于显示图片:

          const blob = new Blob([compressedArrayBuffer], {type: 'image/png'});

          const imageUrl = URL.createObjectURL(blob);

          console.log(imageUrl); // 用于显示或下载图片等

      } catch (error) {

          console.error("处理PNG文件时出错: ", error);

      }

  };

  reader.onerror = function (error) {

      console.error("读取文件时出错: ", error);

  };

  reader.readAsArrayBuffer(file);

}

体验参考：

 简单设计EasyDesign-免费在线设计工具图片处理工具https://jiandan.link/#/imagetools?index=0&com=ImageCompress