关于使用dom-to-image以及html2canvas

前言

基于react开发的多页面h5项目，嵌入客户端中，需要对页面内容生成海报进行分享

思路

1.使用dom-to-image，git地址：https://github.com/tsayen/dom-to-image
2.将生成的图片（base64）通过jsBridge
（可参考：https://www.jianshu.com/p/d9f457842091）提供给客户端
3.客户端通过集成友盟SDK进行图片分享

执行

使用toPng，结果：图片较为模糊；aos显示正常，ios部分背景图片无法显示

import domtoimg from 'dom-to-image';

const node = document.getElementById('root')
try {
  let dataUrl = await domtoimg.toPng(node)
  // share to app
}catch (){}

使用toJpeg，结果：同toPng
使用toSvg，结果：客户端都显示正常，但友盟不支持svg格式图片分享，将svg转化为png格式后部分背景图片仍然显示异常

问题分析

背景图片css代码

.cotboxcontain {
  width: 100%;
  background: url(xxx.png) no-repeat center;
  background-size: 100% auto;
}

1.ios部分背景图片显示失败，经过图片格式检查，发现由ps工具导出的图片在ios webview中转换存在兼容性问题，调整成sketch导出后正常;
2.矩形的大图仍然无法显示（原因暂未找到）

转换思路

使用html2canvas

import html2canvas from 'html2canvas'

const node = document.getElementById('root')
try() {
  let canvas = await html2canvas(node)
  if (canvas) {
    dataUrl = canvas.toDataURL('image/png')
  }
}catch () {}

结果：海报过长，截图出现空白；aos部分背景图片无法显示，ios显示正常
调整node = document.body后截图正常

封装完整截图Func

domtoimg.js

import domtoimg from 'dom-to-image'
import html2canvas from 'html2canvas'
import { getPlatform } from '../utils'

/**
 * @prop {*} node document.getElementById(XXX)
 * @prop {Function} succCb 生成成功回调函数
 * @prop {Function} failCb 生成失败回调函数
 * @prop {Boolean} showDom 是否显示在dom上
 */
export default async function domToImg({ node = document.body, succCb, failCb, showDom = false }) {
    try {
        let dataUrl = ''
        if (getPlatform() === 'Ios') {
            let canvas = await html2canvas(node)
            if (canvas) {
                dataUrl = canvas.toDataURL('image/png')
                showDom && node.appendChild(canvas)
            }
        } else {
            dataUrl = await domtoimg.toPng(node)
            if (showDom) {
                let img = new Image()
                img.src = dataUrl
                node.appendChild(img)
            }
        }
        succCb(dataUrl)
    } catch (error) {
        console.error('oops, something went wrong!', error);
        failCb()
    }
}

调用

import domToImg from '../utils/domtoimg'
import JsBridge from '../utils/jsBridge'

const bridge = new JsBridge()
domToImg({
   succCb: dataUrl => {
       bridge.shareImg(dataUrl)
   },
   failCb: () => {}
})