#优质博文 #前端
How to easily convert HTML to image in NodeJS or in the browser

推荐的是 html2canvas 库,但是之前做过类似的需求的时候我记得svg字体踩过坑,后来用过 html-to-image 挺好的,适合那种生成海报的场景。

AI 摘要:介绍在 NodeJS 中使用 Puppeteer 和在浏览器中使用 html2canvas 将 HTML 转换为图像的方法。

本文详细讲解了两种将 HTML 转换为图像的技术方案:
1. 服务器端方案(NodeJS):通过 Puppeteer 库控制无头 Chrome/Chromium 浏览器,实现 HTML 渲染与截图。作者逐步演示了安装、启动浏览器实例、设置 HTML 内容、生成截图(支持 PNG/JPEG/WebP 格式)和关闭浏览器的完整流程,并列举了 page.screenshot() 方法的参数配置(如区域裁剪、背景透明、图像质量等)。
2. 浏览器端方案:使用 html2canvas 库将指定 HTML 元素异步转换为 Canvas 画布,再通过 toDataURL 生成图像数据并触发下载。文中提供了 CDN 加载方式和核心代码示例。


#node #puppeteer #html
 
 
Back to Top