美文网首页小程序
vue使用html2canvas页面截图

vue使用html2canvas页面截图

作者: 大咔丶 | 来源:发表于2020-07-08 17:47 被阅读0次

由于项目需要页面截图功能,我就找到了html2canvas插件

<div ref="shareDom">
    <div class="exclude"></div>
</div>
<button @click="goShare()">分享</button>
// js

async goShare(){
    let dom = this.$refs["shareDom"];
    const res = await html2canvas(dom, { 
        width: parseInt(window.getComputedStyle(dom).width),
        height: parseInt(window.getComputedStyle(dom).height),
        allowTaint: true,
        taintTest: false, 
        scale: window.devicePixelRatio, // 设备像素比
        ignoreElements:(element)=>{ // 可从渲染中删除匹配的元素
            if(element.className === 'exclude') return true;
        },
    })
    this.imgUrl = res.toDataURL()
}


最后就是一张base64图片,大功告成。

相关文章