uniapp海报生成

<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

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美,让我痴迷

你的好,我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值