uni-app使用html2canvas

uni-app html2canvas在web端兼容性挺好的，但是对于app来说就不太行

uni-app App是vue页面，无法获取window对象，所以我们就需要配合render.js来完成canvas的绘制

人为触发比如点击按钮实现起来很方便，但是有时候我们需要进来就执行绘制的方法，那么就需要如下操作：

 

在开发过程中我们将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 '@/utils/image-tools.js';
    export default {
        name: 'html2canvas',
        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);
                    const canvas = await html2canvas(shareContent,{
                        width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
                        height: shareContent.offsetHeight,//防止白边
                        logging: true,
                        useCORS: true
                    });
                    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>

 

index.vue:

index页面直接获取生成后的数据

<html2canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish">
                <view class="invite-image" id="poster" :class="i18n.locale=='en'?'en':'zh'">
                    <view class="code-image">
                        <view class="qrimg">
                           <tki-qrcode
                            ref="qrcode"
                            :cid="cid"
                            :val="dowaload"
                            :size="size"
                            :unit="unit"
                            :onval="onval"
                            foreground="#000000"
                            pdground="#000000"
                            :loadMake="loadMake"
                            :loadingText="i18n.t('base.textLoading')"
                            @result="qrR" />
                        </view>
                    </view>
                    <view class="invite-text">{{i18n.t('user.invite.inviteCode')}}</view>
                    <view class="invite-code">{{userInfo.code}}</view>
                </view>
        </html2canvas>

中间是二维码部分可以忽略，从而就可以实现海报的绘制，保存的时候重复的照片只会保存一张，有时候可能会失败，就要返回重新进入再次保存

IOS可能存在错误，由于时间有限，没来得及研究，就只看了安卓的，后面有机会再研究，要是谁做出来了，也欢迎分享!

/**
             * 渲染完毕接收图片
             * @param {String} filePath
             */
            renderFinish(filePath) {
                console.log(filePath);
                this.filePath = filePath;
                that.btnShow=true
                console.log("filePath", filePath)
            },