Node Poster

简介

使用nodejs快速生成图片，使用 html 模板生成图片，可加入动态参数。可用于分享海报、邀请卡片、拉新图片等

实现说明

Puppeteer 是一个 Node 库，可以用来自动化的测试网站，它可以在后台运行，不会影响用户的使用

可以访问一个网页地址，然后截图，或者是生成PDF文件。也可以传入HTML字符串渲染成页面，然后截图或者生成PDF文件

我们使用Pug模板引擎，在服务端生成网页，将页面地址传入 Puppeteer，然后生成图片并返回给用户

优劣对比

相比 canvas 生成图片

使用 HTML 页面生成图片，可以使用 CSS、JS 等，可以实现更加复杂的页面效果，开发效率更高、成本更低

Puppeteer 生成的图片更加清晰，不会出现锯齿，但是生成图片的速度会慢一些，

不过生成速度在100ms左右，对于分享海报、邀请卡片等，速度还是可以接受的

在服务端生成图片，兼容性更好，不需要考虑浏览器兼容问题

安装教程

# 安装依赖
npm i

# 启动服务
node server.js

使用说明

1. 修改 /views/index.pug 中的内容，Pug是HTML的模板引擎，可是正常使用CSS、JS等，可以参考 Pug官网

2. 访问 http://localhost:37654 即可看到效果

3. 可以通过query进行参数传递，如 http://localhost:37654?name=world，则页面中可以使用 name 变量，进行内容的替换

4. 修改 /routes/index.js 中的内容，可以对图片的生成进行控制，如修改图片的宽高、像素比等

5. 访问 http://localhost:37654/poster 即可看到生成的图片，也需要传递参数，如 http://localhost:37654/poster?name=world

参数说明

qr 参数为二维码内容，如果不传，则不生成二维码 如 http://localhost:37654/poster?qr=hi world

二维码宽高、边距等参数，可以在 /routes/index.js 中进行修改，可参考 qrcode 的文档

id 参数为mysql数据库中的id，在 /routes/index.js 编写sql语句，然后在 /views/index.pug 中使用 data 变量

需要在 /server.js 开启数据库连接

部署问题

在 Ubuntu20 运行 Puppeteer 时，会报错 Failed to launch the browser process!，执行以下命令即可

sudo apt-get install -y libx11-xcb1 libxcomposite1 libxdamage1 libxext6 libxfixes3 libnss3 libnspr4 libgtk-3-0 libxss1 libasound2 libgbm1

在服务器中 中文乱码问题

方法一：在ubuntu上安装中文字体库

方法二：在css中引入字体包，也可以更好的还原UI稿件。可能在首次加载慢一点，但是后续加载速度几乎没有影响。也可以对字体包进行裁剪，只保留需要的字体。