teambuy-front/pages_order/mine/promotion.vue

<template>
	<view class="promotion">
		
		<navbar title="二维码" 
		bgColor="rgb(235, 51, 0)"
		color="#fff"
		leftClick @leftClick="$utils.navigateBack" />
		
		
		<image
		class="image" 
		:src="imagePath" mode="aspectFill"></image>			
		
		<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'Promotion',
		computed: {
			...mapState(['userInfo', 'promotionUrl']),
		},
		data() {
			return {
				url: '',
				title: '',
				baseUrl: 'https://image.hhlm1688.com/',
				canvas: {},
				imagePath: '',
			}
		},
		onShow() {
			if(this.promotionUrl){
				this.imagePath = this.promotionUrl
			}else{
				this.getQrCode()
			}
			this.$store.commit('getUserInfo')
		},
		methods: {
			getQrCode() {
				this.$api('getInviteCode', res => {
					if (res.code == 200) {
						this.url = res.result.url
						this.title = res.result.name
						this.draw()
					}
				})
			},
			draw() {

				uni.showLoading({
					title: "拼命绘画中..."
				})

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						const canvas = res[0].node
						// 渲染上下文
						const ctx = canvas.getContext('2d')
						// Canvas 画布的实际绘制宽高
						const width = res[0].width
						const height = res[0].height
						
						console.log(width, height);
						// 初始化画布大小
						const dpr = wx.getWindowInfo().pixelRatio
						
						//根据dpr调整
						// dpr  2 4
						//      3 6
						let Ratio = dpr * 2
						
						canvas.width = width * dpr
						canvas.height = height * dpr
						
						this.canvas = canvas
						ctx.scale(dpr, dpr)
						ctx.clearRect(0, 0, width, height)
						
						// ctx.fillStyle = '#fff'
						// ctx.fillRect(0, 0, canvas.width, canvas.height)
						
						
						//图片
						const bgImage = canvas.createImage()
						bgImage.src = this.configList.qr_code
						
						//二维码图片
						const coderImage = canvas.createImage()
						coderImage.src = this.baseUrl + this.url
						
						
						bgImage.onload = () => {
							canvas.width = bgImage.width
							canvas.height = bgImage.height
							ctx.drawImage(bgImage,
							0, 0, bgImage.width, bgImage.height)
							
							let size = Math.floor(canvas.width / 3)
							
							coderImage.onload = () => {
								ctx.drawImage(coderImage,
								canvas.width / 2 - (size / 2), canvas.height * 0.6, size, size)
								this.canvasToTempFilePath()
							}
						}

					})

			},
			canvasToTempFilePath(){
				// 绘制完成后存储路径
				setTimeout(() => {
					wx.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.canvas.width,
						height: this.canvas.height,
						canvas : this.canvas,
						success: (res) => {
							var tempFilePath = res.tempFilePath;
							this.imagePath = tempFilePath
							
							this.$store.commit('setPromotionUrl', res.tempFilePath)
							
							uni.hideLoading()
							this.load = false
						}
					});
				}, 200);
			},
			back() {
				uni.navigateBack(-1)
			},
			async preservationImg(img) {
				await this.$authorize('scope.writePhotosAlbum')
				this.imgApi(img);
			},
			imgApi(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.promotion {
		width: 100%;
		height: 100vh;
		background-color: $uni-color;
	}
	.image{
		width: 100%;
		height: calc(100vh - 200rpx);
	}

	#myCanvas {
		position: fixed;
		left: 100%;
		/* visibility: hidden */
		/* visibility: hidden; */
		/* margin-top: 100rpx; */
		width: 750rpx;
		height: calc(100vh - 120rpx);
		/* line-height: 20px; */
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
	}
</style>