NewZkgj/components/html2canvas/html2canvas.vue

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

<script>
	import { base64ToPath } from '@/static/libs/image-tools.js';
	export default {
		name: 'html2canvas',
		props: {
			domId: {
				type: String,
				required: true
			}
		},
		methods: {
			async renderFinish(base64) {
				try{
					const imgPath = await base64ToPath(base64, '.jpeg');
					this.$emit('renderFinish', imgPath);
				}catch(e){
					//TODO handle the exception
					console.log('html2canvas error', e)
				}
			},
			showLoading() {
				uni.showToast({
					title: "正在生成海报",
					icon: "none",
					mask: true,
					duration: 100000
				})
			},
			hideLoading() {
				uni.hideToast();
			}
		}
	}
</script>

<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	methods: {
		async create(domId) {
			try {
				this.$ownerInstance.callMethod('showLoading', true);
				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);
					this.$ownerInstance.callMethod('hideLoading', true);
					clearTimeout(timeout);
				}, 500);
			} catch(error){
				console.log(error)
			}
		}
	}
}
</script>


<style lang="scss">

</style>