byte转图片_判断png图片含有透明区域

最近在开发【psd设计稿转html】的工具中遇到如下问题：

1. 批量保存下来的图片都是png格式，图片尺寸比较大的情况下会超过1M，线上下载这类图片会比较耗时。可以考虑转成jpg格式。
2. png转jpg有一个前提，png不能含有透明区域，否则会被强制渲染成白色，UI效果就变了。

问题1可以通过设计师或者第三方app进行转换，但是需要人工成本，另外一个就是利用npm上的images工具把png变成jpg来自动转掉。

问题2比较麻烦，需要解决判断是否含有透明区域的问题。浏览器端可以通过canvas获取图片数据，判断rgba中的a是否小于等于255，得知图片是否含有透明区域。而node端则可以通过canvas模块做同样的操作。原理差不多，但需要获取到图片的宽高，会产生另外问题3：如何获取png图片的宽高？

这就要回到png的解析了，png头8个字节是有一定规律，可以用来判断当前的文件内容是否属于png格式，png的头一个数据块IHDR会包含宽高的数据，所以可以从IHDR下手解决，详细代码如下：

/*

这里详细规则参考规范：

Portable Network Graphics (PNG) Specification (Second Edition)​www.w3.org