uniapp canvas绘图生成海报

妖狐艹你老母 2021-09-19 13:18 1385阅读 0赞

组件：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>