html2canvas实现基于DOM截图

安装

npm install --save html2canvas

使用

<div ref="app">hello world</div>

import html2canvas from 'html2canvas'

html2canvas(this.$refs.app, {
    width: this.$refs.app.clientWidth,
    height: this.$refs.app.clientHeight,
    scrollY: 0,
    scrollX: 0,
    useCORS: true
}).then(canvas => {
    let imageUrl = canvas.toDataURL('image/png', 1.0) // 将canvas转成base64图片格式
  
})

注意点一：

区域不可用transform来定位，否则会有部分手机截图不全问题

注意点二：

ios 15 中 html2Canvas 不兼容 font-family: -apple-system, system-ui

注意点三：

1.0.0-rc.7版本不兼容 IOS 13.4 至 14 以内