activitys-uniapp/components/poster/poster.vue

<template>
	<view class="content" v-if="isShow" >
		<view style="position: relative;">
			<image :src="img" style="height: 950rpx;width: 550rpx;"  @load="load"></image>
			<image @click.stop="isShow=false" style="position: absolute;right: -50rpx;top: -60rpx;width: 50rpx;height: 50rpx;" src="@/static/icon/close.png" mode=""></image>
		</view>

		<view class="btn" v-if="imgLoad">
			<view class="save-btn" @click.stop="saveImage">保存图片</view>
			<view class="save-btn" @click.stop="goLottery"> 去抽奖 </view>
		</view>

		<canvas style="position: fixed;top: 999999999rpx;" @click.stop=""
			:style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
	</view>
</template>

<script>
	export default {
		props: {
			headerImg: {
				type: String,
				default: 'https://gx.vote.activity.obs.cn-south-1.myhuaweicloud.com:443/a9d4b65ba1cd4bc88ef9da08cb8fcd26-poster.jpg'
			},
			avatar: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '我是第888位大赛代言人！'
			},
			subTitle: {
				type: String,
				default: '邀请您为888号作品投票！'
			},
			desc: {
				type: String,
				default: '关注公众号参与投票！'
			},
		},
		data() {
			return {
				imgLoad: false,
				img: '',
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				qrcode: ''
			}
		},
		methods: {
			saveImage(){
				
			},
			goLottery(){
				
			},
			load() {
				this.imgLoad = true
			},
			//显示
			showCanvas(qrcode) {
				this.isShow = true
				this.qrcode = qrcode
				this.__init()
			},
			//初始化画布
			async __init() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas', this)
				this.canvasW = uni.upx2px(750);
				this.canvasH = uni.upx2px(1333);
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
				//绘制圆角背景
				this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH, 0, '#f82001')
				//绘制标题图
				let headerImg = await this.getImageInfo(this.headerImg)
				let hW = uni.upx2px(750);
				let hH = uni.upx2px(1333);
				this.drawRoundImg(this.ctx, headerImg.path, ((this.canvasW - hW) / 2), ((this.canvasW - hW) / 2), hW,
					hH, 0)
				//绘制头像
				const userInfo =  uni.getStorageSync("userInfo");
				let avatar = await this.getImageInfo( userInfo.avatar ||this.avatar)
				let avatarW = 290
				let aW = uni.upx2px(avatarW);
				this.drawRoundImg(this.ctx, avatar.path, (hW - aW) / 2, uni.upx2px(222), aW, aW, uni.upx2px(avatarW /
					2))
				//绘制标题
				let titleSize = 19
				let titleParams = {
					color: '#fff',
					x: (hW / 2) - (this.title.length * titleSize / 2) - 10,
					y: (hH / 2) + uni.upx2px(110)
				}
				this.ctx.font = "19px 华文楷体"
				this.ctx.setFontSize(titleSize); //设置标题字体大小
				this.ctx.setFillStyle('#fff'); //设置标题文本颜色
				this.ctx.fillText(this.title, titleParams.x, titleParams.y)
				//绘制副标题
				let subTitleParams = {
					color: '#fff',
					y: (hH / 2) + uni.upx2px(170)
				}
				this.ctx.setFontSize(titleSize); //设置标题字体大小
				this.ctx.setFillStyle('#fff'); //设置标题文本颜色
				this.ctx.fillText(this.subTitle, titleParams.x, subTitleParams.y)
				//小程序码
				let qrSize = uni.upx2px(150)
				let qrcodeImg = await this.getImageInfo(this.qrcode)
				this.ctx.drawImage(qrcodeImg.path, hW / 2 + uni.upx2px(116), hH - uni.upx2px(344), qrSize, qrSize)
				//绘制描述
				let descSize = 14
				let descParams = {
					color: '#fff',
					x: hW / 2 + uni.upx2px(70),
					y: hH - uni.upx2px(308) + qrSize
				}
				this.ctx.setFontSize(descSize); //设置标题字体大小
				this.ctx.setFillStyle('#fff'); //设置标题文本颜色
				this.ctx.fillText(this.desc, descParams.x, descParams.y)
				//渲染
				this.ctx.draw(true, (res) => {
					uni.hideLoading()
					this.canvasToTempFilePath()
				})
			},
			//绘制实心圆
			drawEmptyRound(ctx, x, y, radius) {
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx, x1, y1, x2, y2, dashLength) {
				ctx.setStrokeStyle("#cccccc") //设置线条的颜色
				ctx.setLineWidth(1) //设置线条宽度
				var dashLen = dashLength,
					xpos = x2 - x1, //得到横向的宽度;
					ypos = y2 - y1, //得到纵向的高度;
					numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for (var i = 0; i < numDashes; i++) {
					if (i % 2 === 0) {
						ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
						//有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
					} else {
						ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
					}
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius) {
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color) {
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color);
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round'); //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius / 2, y + radius / 2, width - radius, height - radius);
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功', image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败', err)
						}
					});
				});
			},
			canvasToTempFilePath() {
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					quality: 1,
					complete: (res) => {
						this.img = res.tempFilePath
					}
				}, this);
			},
			//保存图片到相册
			saveImage() {
				//判断用户授权
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.img,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							that.isShow = false
						}, 2000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 999;
		padding-top: 60rpx;

		.save-btn {
			margin-top: 50rpx;
			color: #FFFFFF;
			background-color: #E72226;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 50rpx;
			margin: 30rpx;
		}

		.cancel-btn {
			background-color: #FFFFFF;
			color: #E72226;
		}
	}

	.btn {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>