#优质博文 #前端
How to easily convert HTML to image in NodeJS or in the browser
推荐的是 html2canvas 库,但是之前做过类似的需求的时候我记得svg字体踩过坑,后来用过 html-to-image 挺好的,适合那种生成海报的场景。
#node #puppeteer #html
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
Rafaelcamargo
How to easily convert HTML to image in NodeJS or in the browser
Whether you're exporting a chart or generating images with dynamic text, converting HTML into an image can be super useful in many situations. This post explains how to do it both on the server (NodeJS) and directly in the browser.