前言

基于react開發(fā)的多頁面h5項目，嵌入客戶端中，需要對頁面內(nèi)容生成海報進(jìn)行分享

思路

1.使用dom-to-image，git地址：https://github.com/tsayen/dom-to-image
2.將生成的圖片（base64）通過jsBridge
（可參考：http://www.itdecent.cn/p/d9f457842091）提供給客戶端
3.客戶端通過集成友盟SDK進(jìn)行圖片分享

執(zhí)行

使用toPng，結(jié)果：圖片較為模糊；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，結(jié)果：同toPng
使用toSvg，結(jié)果：客戶端都顯示正常，但友盟不支持svg格式圖片分享，將svg轉(zhuǎn)化為png格式后部分背景圖片仍然顯示異常

問題分析

背景圖片css代碼

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

1.ios部分背景圖片顯示失敗，經(jīng)過圖片格式檢查，發(fā)現(xiàn)由ps工具導(dǎo)出的圖片在ios webview中轉(zhuǎn)換存在兼容性問題，調(diào)整成sketch導(dǎo)出后正常;
2.矩形的大圖仍然無法顯示（原因暫未找到）

轉(zhuǎn)換思路

使用html2canvas

import html2canvas from 'html2canvas'

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

結(jié)果：海報過長，截圖出現(xiàn)空白；aos部分背景圖片無法顯示，ios顯示正常
調(diào)整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 生成成功回調(diào)函數(shù)
 * @prop {Function} failCb 生成失敗回調(diào)函數(shù)
 * @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()
    }
}

調(diào)用

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

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