JS校验png图片是否带有Alpha通道

一、需求背景

本公司在制作开发者平台时，考虑到App应用上架到苹果开发者市场需要对图标有一定的要求，其中就包含了不能携带Alpha通道。

二、Alpha通道说明

需要注意的是：Alpha通道不是简单的指透明度，一张不透明的图片也可以携带Alpha通道。如果你只是想判断是否包含透明度，请参考：JS检测PNG图片是否有透明背景、头图等操作，想要校验Alpha，我们首先需要获取到图片的详细信息，这里我通过读取图片的二进制数据来获取详细信息。

通过阅读AlloyTeam的png的故事，对图片二进制数据有一些了解，得出一下结论：

        [0, 8]位表示的是png图片的类型，可以通过这个判断图片类型，值为：[137, 80, 78, 71, 13, 10, 26, 10]；

        [8, 12]位表示数据内容长度；

        [12, 16]位表示数据块类型；

当[12, 16]的数据转成字节码为 IHDR 时，表示图片带有宽度、高度和深度等数据：

        [16, 20]16~19位表示图片的宽度

        [20~24]位表示图片的高度

        [24]位表示图片的深度

        [25]位表示图片的颜色类型

[25]就是我们所需要的数据，它有5种值：

颜色类型	占用通道数	描述
0	1	灰度图像，只有1个灰色通道
2	3	rgb真彩色图像，有RGB3个通道
3	1	索引颜色图像，只有索引值一个通道
4	2	灰度图像 + alpha通道
6	4	rgba4个通道

三、实现步骤

1. 读取图片缓冲区数据
2. 把缓存区数据转成二进制数据
3. 判断数据块类型
4. 根据[25]数值判断是否包含Alpha通道

四、代码分享

const readBuffer = (file: any) => {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.onload = () => {
			resolve(reader.result);
		};
		reader.onerror = reject;
		reader.readAsArrayBuffer(file);
	});
};

export const isHasAlpha = async (file: any) => {
    // 读取图片缓存区数据
	const buffers = await readBuffer(file);
    // 缓存区数据转成二进制数据，并获取0~25位数据
	const uint8Array = new Uint8Array(buffers, 0, 26);
    // 获取类型
	let type = ''
	uint8Array.slice(12, 16).forEach((number) => {
		type += String.fromCharCode(number)
	})
    // 判断类型和[25]的数值
	if (type == 'IHDR' && (uint8Array[25] == 6 || uint8Array[25] == 4 || uint8Array[25] == 3)) {
		return true
	} else {
		return false
	}
}

五、参考文案

png的故事

JS判断PNG中是否含有Alpha通道