最近在开发【psd设计稿转html】的工具中遇到如下问题:
- 批量保存下来的图片都是png格式,图片尺寸比较大的情况下会超过1M,线上下载这类图片会比较耗时。可以考虑转成jpg格式。
- 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![dc2f861dbbfa014ed317a7172a238ba2.png](https://i-blog.csdnimg.cn/blog_migrate/28d43639f46cc85f24f2cca591678677.png)