activitys-uniapp/components/poster/poster.vue

<template>
	<view class="content" v-if="isShow">
		<view style="position: relative;">
			<image :show-menu-by-longpress="true" :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> -->
			
			<text style="color: #e8e8e8;margin-top: 16rpx;font-size: 28rpx;" >长按保存图片</text>
			<!-- <view class="save-btn" @click.stop="goLottery" v-if="subTitle"> 去抽奖 </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: {
			activeId:{
				type:String,
				default:''
			},
			avatar: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '我是第888位大赛代言人！'
			},
			subTitle: {
				type: String,
				default: '邀请您为888号作品投票！'
			},
			desc: {
				type: String,
				default: '关注公众号参与投票！'
			},
		},
		data() {
			return {
				posterParams:{
					//背景图
					bgImg:"https://vote-obs.guosen-fumao.cn/ce6e19c78f1b4220b4716ea11af960f5-z70fIvNXVEQ11b0ee4e6d35913e6f22391705967fe3f.jpg",
					//头像大小
					avatarSize:160,
					//头像的Y坐标
					avatarY:500,
					//标题的y坐标
					titleY:80,
					//副标题的y坐标
					subTitleY:130
				},
				imgLoad: false,
				img: '',
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				qrcode: '',
			}
		},
		created() {
			this.initParams()
		},
		methods: {
			initParams(){
				let params={
					activeId:this.activeId
				}
				this.$api.poster.list(params).then(res=>{
					const records=res.data.data.records
					console.log("123");
					if (this.$isNotEmpty(records)) {
						this.posterParams=records[0]
					}
					console.log(this.posterParams,"/******");
				})
			},
			goLottery() {
				uni.navigateTo({
					url: "/pages/webview/webview?url= " + encodeURIComponent(
						'https://api.jijipai.cn/h5/#/pages/activity/lottery?drawId=12')
				})
			},
			load() {
				this.imgLoad = true
			},
			chkstrlen(str) {
				var strlen = 0;
				for (var i = 0; i < str.length; i++) {
					if (str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2
						strlen += 2;
					else
						strlen++;
				}
				return strlen;
			},
			//显示
			showCanvas() {
				this.isShow = true
				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)
				//绘制标题图
				let bgImg = await this.getImageInfo(this.posterParams.bgImg)
				let hW = uni.upx2px(750);
				let hH = uni.upx2px(1333);
				this.drawRoundImg(this.ctx, bgImg.path, ((this.canvasW - hW) / 2), ((this.canvasW - hW) / 2), hW,
					hH, 0)
				//绘制头像
				// const userInfo = uni.getStorageSync("userInfo");
				let avatar = await this.getImageInfo(this.avatar)
				let aW = uni.upx2px(this.posterParams.avatarSize);
				this.drawRoundImg(this.ctx, avatar.path, (hW - aW) / 2, uni.upx2px(this.posterParams.avatarY), aW, aW, uni.upx2px(this.posterParams.avatarSize /
					2))
				//绘制标题
				let titleSize = this.$isNotEmpty(this.posterParams.fontSize) && this.posterParams.fontSize != -1 ? this.posterParams.fontSize : 20
				let titleLen=this.chkstrlen(this.title) / 2
				let titleParams = {
					color: this.posterParams.fontColor || '#fff',
					x: (hW / 2) - ( titleLen * titleSize / 2),
					y: (hH / 2) + uni.upx2px(this.posterParams.titleY)
				}
				this.ctx.font = "19px 华文楷体"
				this.ctx.setFontSize(titleSize); //设置标题字体大小
				this.ctx.setFillStyle(titleParams.color); //设置标题文本颜色
				this.ctx.fillText(this.title, titleParams.x, titleParams.y)
				//绘制副标题
				let subTitleLen=this.chkstrlen(this.subTitle) / 2
				let subTitleParams = {
					color: this.posterParams.fontColor || '#fff',
					x: (hW / 2) - ( subTitleLen * titleSize / 2),
					y: (hH / 2) + uni.upx2px(this.posterParams.subTitleY)
				}
				this.ctx.setFontSize(titleSize); //设置标题字体大小
				this.ctx.setFillStyle(subTitleParams.color); //设置标题文本颜色
				this.ctx.fillText(this.subTitle, subTitleParams.x, subTitleParams.y);
				// this.ctx.setTextAlign('center'); //设置文字的对齐
				// this.textPrewrap(this.ctx, this.subTitle, subTitleParams.x,  subTitleParams.y, 24, this.canvasW, 2);
				
				//小程序码
				// let qrSize = uni.upx2px(200)
				// let qrcodeImg = await this.getImageInfo(this.qrcode)
				// this.ctx.drawImage(qrcodeImg.path, hW / 2 + uni.upx2px(96), hH - uni.upx2px(396), qrSize, qrSize)
				//绘制描述
				// let descSize = 14
				// let descParams = {
				// 	color: '#fff',
				// 	x: hW / 2 + uni.upx2px(70),
				// 	y: hH - uni.upx2px(358) + 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
						}, 200)
					}
				})
			},
			/**
			 *  文字自动换行
			 *  ctx： 画布的上下文环境
			 *  content： 需要绘制的文本内容
			 *  drawX： 绘制文本的x坐标
			 *  drawY： 绘制文本的y坐标
			 *  lineHeight：文本之间的行高
			 *  lineMaxWidth：每行文本的最大宽度
			 *  lineNum：最多绘制的行数
			 **/
			textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
			    var drawTxt = ''; // 当前绘制的内容
			    var drawLine = 1; // 第几行开始绘制
			    var drawIndex = 0; // 当前绘制内容的索引
				
			    // 判断内容是否可以一行绘制完毕
			    if(ctx.measureText(content).width <= lineMaxWidth) {
			        ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
			    } else {
			        for (var i = 0; i < content.length; i++) {
						drawTxt += content[i];
						if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
							if (drawLine >= lineNum) {
								ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
								break;
							} else {
								ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
								drawIndex = i + 1;
								drawLine += 1;
								drawY += lineHeight;
								drawTxt = '';
							}
						} else {
							// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
							if (i === content.length - 1) {
								ctx.fillText(content.substring(drawIndex), drawX, drawY);
							}
						}
					}
			    }
			}
		}
	}
</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>