赶项目的时候，临时要把页面做好的静态页面导出，这才研究html怎么转换成图片，一开始以为另存为就可以，结果拿到的还是网页文件。
先是直接选中网页内容截图，页面里的文字、阴影样式经常错位，滚动页面长内容还得分段截，拼出来边缘对不齐，客户那边看了说质感很差。试了在线转换网站，上传html文件之后，外部引用的css和图片路径一乱，渲染出来就是空白块，还要手动把所有资源改成在线地址，折腾半天。
html转换成图片：浏览器打印另存的方式
打开本地html文件，用Chrome浏览器加载完整页面，等所有图片、样式全部加载完毕，按下Ctrl+P调出打印面板。目标打印机那里不要选实体打印机，改成另存为PDF，先导出PDF，之后再用PDF转图片工具输出png。这个法子的好处是页面布局不会乱，但是多层透明样式，偶尔会出现底色丢失的问题。
这个办法有短板。
页面有动画、固定悬浮元素的时候，打印渲染会忽略动态效果，只能抓到静态初始画面。还有页面宽度超出打印纸张尺寸，内容会被自动压缩，需要提前调整打印设置里的缩放比例，一点点试数值。
html转换成图片：无头浏览器库生成方案
| 方案 | 操作门槛 | 渲染完整度 | 适用场景 |
|---|---|---|---|
| 在线网页转换工具 | 低 | 一般，资源路径容易失效 | 简单单文件html，无外部素材 |
| 浏览器打印转PDF再转图 | 低 | 较好，动态效果丢失 | 静态文档类页面，固定版式 |
| Puppeteer无头浏览器 | 高，需要Node环境 | 高，还原全部样式 | 批量转换、带复杂css的页面 |
搭好Node环境之后，安装Puppeteer，写一小段脚本读取本地html路径，调用page.screenshot方法直接输出png图片。页面所有css样式、图片、渐变都能原样渲染，长页面也能设置fullPage:true一次性完整截图，不用拼接。只是第一次运行会自动下载Chromium，体积不小，电脑配置差的话，启动速度很慢。
路径问题最磨人。本地html里写相对路径引用图片，无头浏览器读取的时候，经常识别不到资源，要统一改成绝对路径，或者把所有素材和html放在同一个目录下，再调整脚本里的访问根目录。漏改一个图片地址，输出图片就会留下空白区域。
做完批量导出之后，关掉编辑器，桌面上堆了一堆生成好的png文件。