h5 uniapp html2canvas生成海报,保存到本地功能实现；

1. 在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数

在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数。
html2canvas.vue:

<template>
    <!-- <view > -->
        <view class="html2canvas" :prop="domId" :change:prop="html2canvas.create">
            <slot></slot>
        <!-- </view> -->

    </view>
</template>

<script>
    import { base64ToPath } from 'image-tools';
    export default {
        name: '',
        
        props: {
            domId: {
                type: String,
                required: true
            }
        },
        methods: {
            async renderFinish(base64) {
                try{
                    const imgPath = await base64ToPath(base64, '.jpeg');
                    console.log(imgPath)
                    this.$emit('renderFinish', imgPath);
                }catch(e){
                    //TODO handle the exception
                    console.log('html2canvas error', e)
                }
            },
            showLoading() {
                uni.showLoading()
            },
            hideLoading() {
                uni.hideLoading();
            }
        }
    }
</script>

<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
    methods: {
        async create(domId) {
            try {
                const timeout = setTimeout(async ()=> {
                    const shareContent = document.querySelector(domId);
                    console.log("XXXX",shareContent,shareContent.offsetWidth,shareContent.offsetHeight)
                    const canvas = await html2canvas(shareContent,{
                        width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
                        height: shareContent.offsetHeight,//防止白边
                        // width:414,//设置canvas尺寸与所截图尺寸相同，防止白边
                        // height: 896,//防止白边
                        logging: true,
                        useCORS: true,
                        scale:3,//处理模糊问题
                    });
                    console.log("canvas",canvas,canvas.windowWidth,canvas.windowHeight)
                    const base64 = canvas.toDataURL('image/jpeg', 1);
                    this.$ownerInstance.callMethod('renderFinish', base64);
                    clearTimeout(timeout);
                }, 500);
            } catch(error){
                console.log(error)
            }
        }
    }
}
</script>


<style lang="scss">

</style>

2. 组件的使用，伪代码不要直接复制uniapp语法

        <html-to-canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish" class="canvas">
            <view class="canvas-main">
				内容
            </view>
        </html-to-canvas>

        //domId 设置为dom元素的样式类名
		domId:".canvas-main" 
		
        /**
         * 渲染完毕接收图片
         * @param {String} filePath
         */
        renderFinish(filePath) {
            console.log(filePath);
            this.filePath = filePath;
            console.log("filePath", filePath)
        },

3. h5保存生成后的图片到本地方法;

        /**
         * @description: 保存到相册
         * @return {*}
         */        
        saveToalbum(Url){
				// var oA = document.createElement("a");
				// oA.download = ''; // 设置下载的文件名，默认是'下载'
				// oA.href = url;
				// document.body.appendChild(oA);
				// oA.click();
				// oA.remove(); // 下载之后把创建的元素删除
                var blob=new Blob([''], {type:'application/octet-stream'});
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = Url;
                a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
                var e = document.createEvent('MouseEvents');
                e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                a.dispatchEvent(e);
                URL.revokeObjectURL(url);
        },