uniapp canvas繪圖生成海報

組件：tki-qrcode.vue  交流羣：836383650

<template>
	<view class="content">
		<button type="primary" @tap="saveToAlbum">保存</button>
		<view class="post">
			<tki-qrcode ref="qrcode" :val="val" :size="200" background="#fff" foreground="#000" pdground="#000" :onval="false"
			 :loadMake="false" @result="qrR" :show="false"></tki-qrcode>
			<view class="wrapper"><canvas style="height: 100%;width: 100%;backgroundColor: #FFFFFF" canvas-id="firstCanvas"></canvas></view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		name: 'canvas-drawer',
		components: {
			tkiQrcode
		},
		data() {
			return {
				val: 'https://www.baidu.com',
				cover: '../../static/cabin01.png'
			};
		},
		onLoad() {},
		methods: {
			qrR(path) {
				let that = this;
				this.qr_path = path;
				let system_info = uni.getSystemInfoSync();
				let ctx = uni.createCanvasContext('firstCanvas');
				uni.getImageInfo({
					src: that.cover,
					success(res) {
						console.log(res.path);
						ctx.drawImage(res.path, 0, 0, 375, uni.upx2px(1020));
						let linearGrad = ctx.createLinearGradient(0, 0, 800, 0);
						linearGrad.addColorStop('0.25', '#8b00d2');
						linearGrad.addColorStop('0.5', '#003fb3');
						linearGrad.addColorStop('0.75', '#ff3ef0');
						ctx.fillStyle = '#FFFFFF';
						ctx.fillRect(uni.upx2px(500), uni.upx2px(790), uni.upx2px(200), uni.upx2px(210));
						ctx.drawImage(path, uni.upx2px(520), uni.upx2px(800), uni.upx2px(160), uni.upx2px(160));
						ctx.font = '13px Arial';
						ctx.fillStyle = '#000';
						ctx.fillText('長按保存二維碼', uni.upx2px(508), uni.upx2px(990));
						ctx.draw(false, () => {
							uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 375,
								height: uni.upx2px(1020),
								destWidth: 375,
								destHeight: uni.upx2px(1020),
								canvasId: 'firstCanvas',
								success: function(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											console.log('save success');
										}
									});
								},
								fail(e) {
									console.log(e);
									uni.showToast({
										title: '生成海報失敗',
										icon: 'none'
									});
								}
							});
						});
					},
					fail(error) {
						console.log(error);
					}
				});



			},
			saveToAlbum() {
				this.$refs.qrcode._makeCode();
			}
		}
	};
</script>

<style lang="scss">
	.post {
		height: 100%;
		background-color: #f4f4f4;
 
		.wrapper {
			height: 1020rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50upx;
		}
	}
</style>