js截屏html2canvas和rasterizehtml使用心得

html2canvas：

import html2canvas from 'html2canvas'

const dom = document.getElementById('react-root')
html2canvas(dom).then(res => {
    const ctx = res.getContext('2d') // ctx在截图上画你想画的东西
    const url = res.toDataURL('image/png;')
})

html2canvas能截准滚动后当前屏幕展示的样子，可通过ctx往截图上添加内容，可惜性能太差，截一张图耗时接近500毫秒，连续截图会有卡顿感。

rasterizehtml：

import Rasterizehtml from 'rasterizehtml'

const html = document.getElementById('react-root')
const canvas = document.createElement('canvas')
Rasterizehtml.drawHTML(html, canvas).then(
    res => {
        const url = 'data:image/svg+xml;base64,' + 
        btoa(unescape(encodeURIComponent(res.svg)))
    },
    err => alert('截图失败')
)

rasterizehtml性能好很多，截一张图耗时只需50毫秒，是html2canvas耗时的十分之一，若需往截图上添加内容，拼接html就好。然而有一个致命缺陷，无论屏幕怎么滚动，截的图始终没变。