guosen-ldt-shop/pages/material-download/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="savePhoto" 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 "u-draw-poster";
	import {
		drawQrCode
	} from "u-draw-poster";
	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 = `/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();
		},
		methods: {
			savePhoto() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgUrl,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败，请稍后重试",
							icon: "none"
						});
					}
				});
			}
		}
	};
</script>


<style lang="scss">

</style>