<template>
	<view class="content">
		<canvas canvas-id="canID" id="canID"></canvas>
	</view>
</template>

<script>
	import { posterCanvas } from '@/utils/yd-cenvas'
	export default {
		name:"poster",
		props:{
			active:{
				type:Object,
				default:{
					activeImg:"https://img1.baidu.com/it/u=3087781904,2825075289&fm=26&fmt=auto&gp=0.jpg"
				}
			}
		},
		data() {
			return {
				arr: [
					{
						type: 2,
						imgCtx: [
							// {
							// 	src: 'https://img2.baidu.com/it/u=3731647135,2048570786&fm=26&fmt=auto&gp=0.jpg',
							// 	x: 30,
							// 	y: 30,
							// 	w: 80,
							// 	h: 80,
							// 	isArc: true
							// },
							{
								src: this.active.activeImg,
								x: 5,
								y: 70,
								w: 310,
								h: 310,
								isArc: false
							}
						]
					},
				 
					{
						type: 2,
						imgCtx: [
							{
								src: 'https://img2.baidu.com/it/u=3048694672,3208316717&fm=26&fmt=auto&gp=0.jpg',
								x: 20,
								y: 400,
								w: 50,
								h: 50
							}
						]
					},
					{
						type: 1,
						textCtx: [
							{
								color: '#333',
								fontSize: 16,
								textAlign: 'left',
								text: '微信用户',
								x: 80,
								y: 415
							},
							{
								color: '#333',
								fontSize: 14,
								textAlign: 'left',
								text: '订台：13076545346',
								x: 80,
								y: 445
							}
						]
					},
					{
						type: 2,
						imgCtx: [
							{
								src: 'https://img1.baidu.com/it/u=3971381075,863986575&fm=26&fmt=auto&gp=0.jpg',
								x: 240,
								y: 400,
								w: 50,
								h: 50
							}
						]
					},
				]
			}
		},
		created() {
			posterCanvas({
			    canvasId: 'canID', 
			    arr: this.arr,
			    bgColor: '#f5f5f5',
			    cw: 370,
			    ch: 600
			}).then(res => {
			    console.log(res)
			});
		}
	}
</script>
<style lang="scss" scoped>
	#canID {
		width: 750upx;
		height: 1200upx;
	}
</style>

获取js

下载地址https://download.csdn.net/download/weixin_45932157/21698760