app-govern/components/Cn-htmlToImg/Cn-htmlToImg.vue

<template>
    <view>
        <view class="html2canvas" :prop="domId" :id="domId" :change:prop="canvasImage.generateImage">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 'html2canvas',
    props: {
        domId: {
            type: String,
            required: true
        }
    },
    methods: {
        htmlToCanvas (option) {
            let posterImg = option.posterImg;
            this.$emit('renderFinish', posterImg);
        }
    }
}
</script>
<script lang="renderjs" module="canvasImage">
import html2canvas from 'html2canvas'
export default {
  methods: {
    // 生成图片需要调用的方法
    generateImage(domId) {
        // 获取设备dpi
        setTimeout(() => {
            let dom =  document.getElementById(domId);
            console.log(dom.offsetWidth, dom.offsetHeight);
            html2canvas(dom, {
                scale: 8,
                useCORS: true,
                width: dom.offsetWidth,
                height: dom.offsetHeight,
            }).then((canvas) => {
                // this.$refs.header.appendChild(canvas);
                const posterImg = canvas.toDataURL()
                this.$ownerInstance.callMethod('htmlToCanvas', {	
                    posterImg: posterImg
                })
            }).catch((err) => {
                console.log(err)
            })
        }, 1000);
    }
  }
}
</script>


<style lang="scss"></style>