guosen-ldt-shop/pagesPoster/pages/createPoster.vue

<template>
	<view class="index">
		<view class="center">
			<image :show-menu-by-longpress="true" :src="imgUrl"
				style="width: 670rpx; height: 940rpx;margin-top: 50rpx;" />
		</view>
		<view style="position: fixed; top: 999999999999999999999rpx">
			<!-- #ifdef MP-WEIXIN -->
			<canvas id="canvas" type="2d" style="width: 670rpx; height: 940rpx" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<canvas canvas-id="canvas" id="canvas" style="width: 670rpx; height: 940rpx" />
			<!-- #endif -->
		</view>
		<view class="" style="position: fixed;bottom: 150rpx;width: 100%;">
			<view class="center">
				<view @click="$mpi.saveImg(this.imgUrl)" class="cu-btn  flex round text-lg"
					style="padding: 46rpx 0;background-color: #EF9944;color: #FFFFFF;width: 76%;">
					<u-icon name="download"></u-icon>
					<text class="margin-left-20">保存到相册</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import DrawPoster from "../comps/u-draw-poster/dist/index.js";
	import {
		drawQrCode
	} from "../comps/u-draw-poster/dist/index.js";
	DrawPoster.useCtx(drawQrCode);
	export default {
		data: () => ({
			imgUrl: '',
		}),
		async onLoad(options) {
			// 创建绘制工具
			const dp = await DrawPoster.build({
				selector: 'canvas',
				loading: true,
				debugging: true,
			});
			const w = (dp.canvas.width = 670);
			const h = (dp.canvas.height = 940);

			//初始化参数
			let index = options.index
			let bgImg = `/pagesPoster/static/poster/wuliao${index}.png`
			let borderImg='/static/icon/border.png'
			let shopDetail = this.$cache.get('selectedShop')
			let text=shopDetail.name
			let qrCodeText = this.$global.QR_PATH + this.$crypto.encrypt(this.vuex_shopId)
			console.log(text.length,"/************");
			let titleParams={
				x:w / 2 - (text.length/2 * 34),
				y:h / 2 - 240,
				color:"#000",
				text:text			}
			let qrParams = {
				x: w / 2 - 175,
				y: h / 2 - 200,
				text: qrCodeText,
				size: 350,
				margin: 5,
			}
			
			if (index==2) {
				titleParams.y=h / 2 - 90
				qrParams.y=h / 2 - 60
			}
			
			if (index==3) {
				titleParams.color='#fff'
				titleParams.y=h / 2 - 150
				qrParams.y=h / 2 - 120
			}
			
			if (index==4) {
				titleParams.y=h / 2 - 240
				qrParams.y=h / 2 - 210
			}
			


			// 绘制基本背景
			dp.draw((ctx) => {
				ctx.fillStyle = '#ffffff';
				ctx.fillRoundRect(0, 0, w, h, 20);
				ctx.clip();
				ctx.fillRect(0, 0, w, h - 160);
			});
			// 绘制图片内容
			dp.draw(async (ctx) => {
				await Promise.all([
					ctx.drawImage(bgImg, 0, 0, w, h),
				]);
				// 用户二维码
				await ctx.drawQrCode(qrParams);
			});

			// 绘制底部文字内容
			dp.draw((ctx) => {
				ctx.fillStyle = titleParams.color;
				ctx.font = '34px PingFang SC';
				ctx.fillText(titleParams.text, titleParams.x, titleParams.y);
			});
			this.imgUrl = await dp.createImagePath();
		},
	};
</script>


<style lang="scss">

</style>