vue使用html2canvas将html转化为图片并保存

1、安装

npm i html2canvas -S

2、导入

在要使用的页面导入
import html2canvas from "html2canvas"

3、声称画布&点击保存

<template>
    <div ref="saveImage" @click="save">
        ……
    </div>
</template>
<script>
    import html2canvas from "html2canvas"
    export default {
        data() {},
        methods: {
            save() {
                html2canvas(this.$refs.saveImage, {
                    allowTaint: false, // 是否允许跨域图像污染画布
                    useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
                    x: 裁剪画布x坐标,
                    y: 裁剪画布y坐标
                }).then(canvas => {
                    // 点击保存操作
                    const link = document.createElement('a')
                    link.href = canvas.toDataURL()
                    link.setAttribute('download', 图片名 + '.png')
                    link.style.display = 'none'
                    document.body.appendChild(link)
                    link.click()
                })
            }
        }
    }
</script>