精华 利用Node Puppeteer 来搭建多端统一的海报渲染服务
发布于 5 年前 作者 falost 5935 次浏览 来自 分享

缘起

在朋友圈,你可能会见过有很多带着个人信息或者二维码的绚丽的海报图片,看起来很高大上的样子。在很早之前,我有过了解的是,这些海报图片都是由 UI 设计师,进行人肉设计出来的,非常考验设计师的忍耐力。再到后来,随着 web 技术的发展,出现了由前端来生成一张又一张的海报图片,这样 UI 设计师只需要设计一张模版图片,剩余的交给前端来完成即可,大大的减轻了 UI 小姐姐们苦力活(滑稽笑)。

虽然,UI 小姐姐的活减轻了,但是前端(包含移动端)小哥哥的活就加重了,还面临着很多头疼的问题,比如:生成的图片清晰度不够、手机兼容问题导致生成失败、资源跨域问题导致生成失败、web 端和移动端生成的图片不一样等等问题。

我们了解下前端是如何生成海报图片的呢?

其实前端是通过 HTML5 新增加的 canvas API 来绘制的,但是 canvas 绘制会有很多的痛点:上手门槛比较高,需要掌握 canvas API;代码可读性比较差、调试复杂;代码可复用低,每个端需要重新编码;无缓存、同一张相同图片会多次绘制,用户体验差;如果有远程图片,可能会引起跨域问题,导致绘制失败等等问题。

针对这些问题,社区出现了一个开源库(html2canvas),通过编写 HTML 页面来生成图片,有效解决了大部分问题,但是图片跨域、缓存、代码复用问题,还是无法解决。针对这些问题,社区提出了使用服务端来完成海报图片渲染,就有可能彻底解决这些问题。

我们该如何通过服务端来渲染这个海报呢?

在小程序社区,有赞商城前端团队成员提出基于 Puppeteer 来实现公共海报渲染服务,使用方只需传入海报图片的html,海报渲染服务绘制一张对应的图片作为返回结果,解决了canvas绘制的各种痛点问题。那么,我今天就来体验下快感吧。在这之前,我们先来了解下!

Puppeteer 是什么

puppeteer 是一个Chrome官方出品的headless Chrome node库。它提供了一系列的API, 可以在无UI的情况下调用Chrome的功能, 适用于爬虫、自动化处理等各种场景等。

Puppeteer 能做什么

根据官网上描述,Puppeteer几乎能实现你能在浏览器上做的任何事情,比如:

1、生成页面截图和 PDF;

2、自动化表单提交、UI 测试、键盘输入等;

3、创建一个最新的自动化测试环境。使用最新的 JavaScript ;

4、和浏览器功能,可以直接在最新版本的 Chrome 中运行测试;

5、捕获站点的时间线跟踪,以帮助诊断性能问题;

6、爬取 SPA 页面并进行预渲染(即’Prerender’);

7、开发个人微信接口,实现个人微信机器人(wechaty)。

本文的渲染服务将会使用它的截图功能,来实现图片生成。

代码实现

接下来,就让我们简单的看看如何代码实现吧!

首先,需要先初始化一个 npm 项目,并且安装响应的模块,这里就不一一说明了。

npm init
npm install puppeteer koa crypto --save

这里,我们安装了三个模块:puppeteer 我们今天的关键性模块、koa 快速搭建一个 web 服务、crypto 通过加密内容字符串来生成唯一标识符。

另外,我的 node 版本是 10.11 的,所以使用了很多新语法。 app.js

/*
 * @Descripttion: 入口文件
 * @version: 1.0.0
 * @Author: falost
 * @Date: 2019-08-27 10:54:32
 * @LastEditors: falost
 * @LastEditTime: 2019-09-08 18:20:41
 */
const SnapshotController = require('./libs/SnapshotController')

const Koa = require('koa')

const controller = new SnapshotController()

const app = new Koa()

app.use(async ctx => {
  return await controller.postSnapshotJson(ctx)
})
app.listen(3000)

/libs/SnapshotController.js

/*
 * @Descripttion: 调取 puppenter 来生成接收到的html 数据生成图片
 * @version: 1.0.0
 * @Author: falost
 * @Date: 2019-08-27 09:55:52
 * @LastEditors: falost
 * @LastEditTime: 2019-09-08 18:20:56
 */
const crypto = require('crypto');
const PuppenteerHelper = require('./PuppenteerHelper');

const oneDay = 24 * 60 * 60;

class SnapshotController {
  /**
   * 截图接口
   * @param {Object} ctx 上下文
   */
  async postSnapshotJson(ctx) {
    const result = await this.handleSnapshot()

    ctx.body = {code: 10000, message: 'ok', result}
  }

  async handleSnapshot() {
    const { ctx } = this
    const { html } = ctx.request.body  // html 是我们将要生成的海报图片的 HTML 实现代码字符串
    // 根据 html 做 sha256 的哈希作为 Redis Key
    const htmlRedisKey = crypto.createHash('sha256').update(html).digest('hex');

    try {
      // 首先看海报是否有绘制过的
      let result = await this.findImageFromCache(htmlRedisKey);

      // 获取缓存失败
      if (!result) {
        result = await this.generateSnapshot(htmlRedisKey);
      }

      return result;
    } catch (error) {
      ctx.status = 500;
      return ctx.throw(500, error.message);
    }

  }

  /**
   * 判断kv中是否有缓存
   * @param {String} htmlRedisKey kv存储的key
   */
  async findImageFromCache(htmlRedisKey) {
    return false
  }

  /**
   * 生成截图
   * @param {String} htmlRedisKey kv存储的key
   */
  async generateSnapshot(htmlRedisKey) {
    const { ctx } = this
    const {
      html,
      width = 375,
      height = 667,
      quality = 80,
      ratio = 2,
      type: imageType = 'jpeg',
    } = ctx.request.body;

    if (!html) {
        return 'html 不能为空'
    }

    let imgBuffer;
    try {
      imgBuffer = await PuppenteerHelper.createImg({
        html,
        width,
        height,
        quality,
        ratio,
        imageType,
        fileType: 'path',
        htmlRedisKey
      });
    } catch (err) {
      // logger
      console.log(err)
    }
    let imgUrl;

    try {
      imgUrl = await this.uploadImage(imgBuffer);
      // 将海报图片路径存在 Redis 里
      await ctx.kvdsClient.setex(htmlRedisKey, oneDay, imgUrl);
    } catch (err) {
    }

    return {
      img: imgUrl || ''
    }
  }

  /**
   * 上传图片到 CDN 服务
   * @param {Buffer} imgBuffer 图片buffer
   */
  async uploadImage(imgBuffer) {
    // upload image to cdn and return cdn url
  }
}

module.exports = SnapshotController  

./libs/PuppenteerHelper.js

/*
 * @Descripttion: 创建生成图片类
 * @version: 1.0.0
 * @Author: falost
 * @Date: 2019-08-27 11:43:41
 * @LastEditors: falost
 * @LastEditTime: 2019-09-08 18:20:51
 */
const puppeteer = require('puppeteer')
const { mkdirsSync, formatNumber } = require('../utils/utils')

class PuppenteerHelper {
  async createImg(params) {
    const browser = await puppeteer.launch({
      headless: true, // 默认为 true 不打开浏览器,设置 false 打开
    })
    const date = new Date()
    const path = `static/upload/${date.getFullYear()}/${formatNumber(date.getMonth() + 1)}`
    mkdirsSync(path)
    // 通过创建浏览器标签来打开
    const page = await browser.newPage()
    // 设置视窗大小
    await page.setViewport({
      width: params.width,
      height: params.height,
      deviceScaleFactor: params.ratio
    })
    // 设置需要截图的html内容
    await page.setContent(params.html)
    await this.waitForNetworkIdle(page, 50)
    let filePath
    // 根据 type 返回不同的类型 一种图片路径、一种 base64
    if (params.fileType === 'path') {
      filePath = `${path}/${params.htmlRedisKey}.${params.imageType}`
      await page.screenshot({
        path: filePath,
        fullPage: false,
        omitBackground: true
      })
    } else {
      filePath = await page.screenshot({
        fullPage: false,
        omitBackground: true,
        encoding: 'base64'
      })
    }
    browser.close()
    return filePath
  }
  // 等待HTML 页面资源加载完成
  waitForNetworkIdle(page, timeout, maxInflightRequests = 0) {  
    page.on('request', onRequestStarted);
    page.on('requestfinished', onRequestFinished);
    page.on('requestfailed', onRequestFinished);
  
    let inflight = 0;
    let fulfill;
    let promise = new Promise(x => fulfill = x);
    let timeoutId = setTimeout(onTimeoutDone, timeout);
    return promise;
  
    function onTimeoutDone() {
      page.removeListener('request', onRequestStarted);
      page.removeListener('requestfinished', onRequestFinished);
      page.removeListener('requestfailed', onRequestFinished);
      fulfill();
    }
  
    function onRequestStarted() {
      ++inflight;
      if (inflight > maxInflightRequests)
        clearTimeout(timeoutId);
    }
  
    function onRequestFinished() {
      if (inflight === 0)
        return;
      --inflight;
      if (inflight === maxInflightRequests)
        timeoutId = setTimeout(onTimeoutDone, timeout);
    }
  }
}
module.exports = new PuppenteerHelper()

…/utils/utils.js

/*
 * @Descripttion: 工具类库
 * @version: 
 * @Author: falost
 * @Date: 2019-08-27 14:10:16
 * @LastEditors: falost
 * @LastEditTime: 2019-08-27 14:15:52
 */
const fs = require('fs')
const path = require('path')

const mkdirsSync = (dirname) => {
  if (fs.existsSync(dirname)) {
    return true;
  } else {
    if (mkdirsSync(path.dirname(dirname))) {
      fs.mkdirSync(dirname);
      return true;
    }
  }
}
const formatNumber = function (n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  mkdirsSync,
  formatNumber
}

效果

到这里,简单的代码实现步骤,现已完成,接下来我们看看最后生成的效果图吧!

image

结语

如果你想要用于生产环境,那么你还需要做一些其他个工作,这样才能保证他能更好的产出。当然这里面也有些坑,还需要我们去完成填坑的。

git 仓库地址:https://github.com/falost/node-puppeteer-poster

如果你想了解更多关于 puppeteer 的使用, 可以查询官方仓库说明文档:https://github.com/GoogleChrome/puppeteer

非常感谢您的耐心阅读!

文中如有不对之处,欢迎留言指教!

作者:falost

原文地址:https://falost.cc/article/5d74e54f8457894be1bc3b45

回到顶部