zh-wx/components/shopro-canvas/shopro-canvas.vue

<template>
	<view class="invite-poster-content">
		<!-- TODO: 小程序端使用type='2d'会有报错 -->
		<canvas class="hideCanvas" canvas-id="self_canvas" :style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
	</view>
</template>

<script>
/**
 * shopro-canvas  - canvas
 * @property {Object} canvasParams - 自定义参数
 * @property {Boolean} isAutoInit = [true] - 是否自动渲染canvas
 */

import _app from '@/shopro/poster/QS-SharePoster/app.js';
import { getSharePoster } from '@/shopro/poster/QS-SharePoster/QS-SharePoster.js';
import tools from '@/shopro/poster/tools.js';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
let ctx = null;
export default {
	components: {},
	data() {
		return {
			poster: {},
			canvasId: 'self_canvas'
		};
	},
	props: {
		canvasParams: {
			type: Object,
			default: () => {}
		},
		isAutoInit: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		...mapGetters(['initShare', 'userInfo'])
	},
	async mounted() {
		ctx = uni.createCanvasContext(this.canvasId, this);
		ctx && this.isAutoInit && this.shareFc();
	},
	methods: {
		async shareFc() {
			let that = this;
			_app.showLoading('绘制中...');
			let config = {};
			if (that.canvasParams.backgroundImage) {
				config = {
					backgroundImage: tools.checkImgHttp(that.canvasParams.backgroundImage, 'bgImage')
				};
			}
			if (that.canvasParams.background) {
				config = {
					background: {
						width: that.canvasParams.background?.width || 100,
						height: that.canvasParams.background?.height || 100,
						backgroundColor: that.canvasParams.background?.color || '#000'
					}
				};
			}

			try {
				_app.log('准备生成:' + new Date());
				const d = await getSharePoster({
					_this: that, //若在组件中使用 必传
					...config,
					posterCanvasId: that.canvasId, //canvasId
					Context: ctx,
					delayTimeScale: 10, //延时系数
					draw: false, //是否执行ctx.draw方法, 推荐false，自己去draw
					drawArray: ({ bgObj, type, bgScale }) => {
						let arr = tools.initDrawArray(bgObj, that.canvasParams.drawArray);
						return new Promise((rs, rj) => {
							rs(arr);
						});
					},
					setCanvasWH: ({ bgObj, type, bgScale }) => {
						// 为动态设置画布宽高的方法，
						this.poster = bgObj;
					}
				});
				await that.drawPoster();
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
				console.log(JSON.stringify(e));
			}
		},
		async drawPoster() {
			let that = this;
			ctx.draw(false, () => {
				uni.canvasToTempFilePath(
					{
						canvasId: that.canvasId,
						success: res => {
							_app.hideLoading();
							that.$emit('success', res.tempFilePath);
							_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + res.tempFilePath);
						},
						fail: err => {
							_app.hideLoading();
							console.log('生成异常', err);
						}
					},
					that
				);
			});
		}
	}
};
</script>

<style lang="scss">
.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
</style>