wxThird/pages/shop/wp.vue

<template>
	<view class="box">
		<view style="padding-top: 100rpx;">
			<canvas canvas-id="mini_poster" style="width: 600rpx;height: 817rpx;margin-left: 73rpx;"></canvas><!-- :style="{ width: canvasW + 'px', height: canvasH + 'px' }" -->
		</view>
		<view style="height: 106rpx;"></view>
		<!-- <view class="footer">
			<view style="height: 106rpx; align-items: center; background-color: #333333;">
				<button style="background: transparent; height: 106rpx; line-height: 106rpx;" @tap="toSaveImage">保存名片</button>
			</view>
		</view> -->
		<view class="downloadBtn" @click="toSaveImage">保存图片</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mpWxQr: "http://dmsphoto.66km.com.cn/marketing/F520E658D4A649B88DF210EA41432A01.png",
				canvasW: 0,
				canvasH: 0,
				invest_areas: [{id: 1, name: "儿童教育"}, {id: 1, name: "少儿编程"}, {id: 1, name: "生物智能"}, {id: 1, name: "万物相连"}, {id: 1, name: "大数据"}],
				nickname: "",
				avatar: "",
				company: "",
				phone: "17610998099",
				email: "redoume@163.com",
				time: "2022.01.21～2022.01.2",
				finished: false,
				sellingPoint:'',
			}
		},
		computed: {
			showInvestAreas() {
				if (this.invest_areas) {
					const names = []
					this.invest_areas.forEach(item => {
						names.push(item.name)
					})
					return names.join(" ")
				}
				return '未设置'
			}
		},
		onLoad(opt) {
			//this.canvasW = uni.getSystemInfoSync().windowWidth
			//this.canvasH = this.calculateCanvasHeight()
			this.avatar=opt.img;
			this.nickname=opt.name;
			if(opt.sellingPoint){
				this.sellingPoint=opt.sellingPoint;
			}
			
			console.log(this.sellingPoint)
			if(this.nickname.length>18){
				this.nickname=this.nickname.substring(0,18)+'...'
			}
			this.canvasW =uni.upx2px(600)
			this.canvasH = uni.upx2px(827)
			this.toDrawCanvas()
		},
		methods: {
			toSaveImage() {
				if (!this.finished) {
					uni.showToast({
						title: '正在生成图片，稍后再试',
						icon: 'none'
					})
					return
				}
				const that = this
				uni.canvasToTempFilePath({
					canvasId: 'mini_poster',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '保存名片码失败'
								})
							}
						})
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '保存名片码失败'
						})
					}
				})
			},
			async toDrawCanvas() {
				const padding = uni.upx2px(34)
				const cardHeight = uni.upx2px(380)
				const cw = this.canvasW - 2 * padding

				let ctx = uni.createCanvasContext('mini_poster', this)

				// 透明背景
				// ctx.setFillStyle('rgba(255, 255, 255, 0)')
				ctx.setFillStyle('#FFFFFF')
				ctx.fillRect(0, 0, this.canvasW, this.canvasH)
				// draw card round rect
				const r = uni.upx2px(12)
				this.drawRoundRect(ctx, padding, padding, cw, cardHeight, r, 2)
				// draw card content
				this.drawCard(ctx, padding, padding, cw, cardHeight)
				// draw avatar
				const av = uni.upx2px(540)
				const topimgh = uni.upx2px(317)
				//console.log(av)
				//console.log(topimgh)
				const hi = await this.downloadImage(this.avatar)
				if (hi.tempFilePath) {
					const x =  uni.upx2px(30) 
					const y =  uni.upx2px(30)
					this.drawRoundRectAvatar(ctx, x, y, av, topimgh, r, hi.tempFilePath)
					
				}
				// draw hello info
				//this.drawHelloInfo(ctx, padding, padding + cardHeight + padding, cw)
				// draw qr code
				if (this.mpWxQr) {
					
					const hello = await this.downloadImage(this.mpWxQr)
					//const padding = uni.upx2px(34)
					//const av = uni.upx2px(180)
					//const totalH = this.calculateCanvasHeight()
					//console.log("totalH=="+totalH)
					console.log(hello.tempFilePath)
					var wxsx=uni.upx2px(68)
					var wxsy=uni.upx2px(649)
					var wxwidth=uni.upx2px(148)
					if (hello.tempFilePath) {
						ctx.drawImage(hello.tempFilePath, wxsx, wxsy, wxwidth,wxwidth)
					}
				}
				ctx.draw()
				this.finished = true
			},
			async drawCard(ctx, x, y, w, h) {
				// draw company
				//let vp = y + uni.upx2px(45)
				//const hp = x + uni.upx2px(52)
				let vp =  uni.upx2px(400)
				const hp = uni.upx2px(52)
				ctx.setTextBaseline('center')
				const fz30 = uni.upx2px(32)
				ctx.fillStyle = '#212121'
				ctx.setFontSize(fz30)
                ctx.fillText(this.nickname, hp, vp)
				var timeX=hp;
				var timeY=vp+30
				
				const fz26 = uni.upx2px(26)
				ctx.setFillStyle('#3C3C3C')
				ctx.setFontSize(fz26)
				ctx.fillText(this.time, timeX, timeY)
				var sm=this.sellingPoint
				ctx.setFillStyle('#999999')
				ctx.setFontSize(fz26)
				var smy=timeY+20
				var maxwidth = uni.upx2px(550)
				if(sm.length>20){
					var sm1=sm.substring(0,20)
					ctx.fillText(sm1, timeX, smy)
					if(sm.length>40){
						var sm2=sm.substring(20,40)
						ctx.fillText(sm2, timeX, smy+20)
						var sm3=sm.substring(40,60)
						ctx.fillText(sm3, timeX, smy+40)
					}else{
						var sm2=sm.substring(20,40)
						ctx.fillText(sm2, timeX, smy+20)
					}
				}else{
					ctx.fillText(sm, timeX, smy)
				}
				
				
				var wemtis1='名额有限 先到先得'
				var wemtisx=uni.upx2px(240)
				var wemtisy=uni.upx2px(700)
				ctx.setFillStyle('#999999')
				const fz24 = uni.upx2px(24)
				ctx.setFontSize(fz24)
				ctx.fillText(wemtis1,wemtisx,wemtisy)
				var wemtis2='长按二维码识别参与活动'
				var wemtisy2=wemtisy+30
				ctx.fillText(wemtis2,wemtisx,wemtisy2)
				// draw nickname
				vp = vp + 30
				
				

				vp = vp + 42
				const iconW = uni.upx2px(30)
				const textH = hp + iconW + 6
				
				ctx.setFillStyle('#333333')
				ctx.setFontSize(fz30)
				

				vp = vp + 28
				
				ctx.setFillStyle('#333333')
				ctx.setFontSize(fz30)
				// ctx.fillText(this.showInvestAreas, textH, vp)
				const oPadding = uni.upx2px(34)
				const iPadding = uni.upx2px(40)
				const textW = w - textH + oPadding - iPadding
				//this.drawTextInOneLine(ctx, this.showInvestAreas, textH, vp, textW)

				vp = vp + 28
				
				ctx.setFillStyle('#333333')
				ctx.setFontSize(fz30)
				//ctx.fillText(this.phone ? this.phone : '', textH, vp)
			},
			async drawHelloInfo(ctx, x, y, w) {
				let vp = y + 12
				const hp = x
				ctx.setTextBaseline('top')
				const fz30 = uni.upx2px(30)
				ctx.setFillStyle('#333333')
				ctx.setFontSize(fz30)
				ctx.fillText('您好，', hp, vp)
				const text = "我是来自 " + this.company + ' 的投资人' + this.nickname
				const lines = this.drawTextInLines(ctx, text, hp, vp, w, 26)
				vp += 26 * lines + 26
				ctx.fillText('这是我的名片，请惠存。', hp, vp)
				vp += 26
				ctx.fillText('谢谢', hp, vp)

				vp += 26
				vp += 40
				ctx.setFillStyle('#F37231')
				ctx.fillRect(hp, vp, 20, 3)
				vp += 7
				ctx.setFillStyle('#333333')
				const fz28 = uni.upx2px(28)
				ctx.setFontSize(fz28)
				ctx.fillText('长按识别二维码', hp, vp)
				vp += 20
				const ttt = '在大天使中查看我的更多信息'
				ctx.fillText(ttt, hp, vp)
			},
			calculateCanvasHeight() {
				// 400 is card height
				const ctx = uni.createCanvasContext('test_poster')
				const padding = uni.upx2px(34)
				const text = "我是来自 " + this.company + ' 的投资人' + this.nickname
				const rows = this.drawTextInLines(ctx, text, padding, 0, this.canvasW - 2 * padding, 26)
				const cardH = uni.upx2px(380)
				const h = padding * 2 + cardH + padding + 12 + 26 * 3 + rows * 26
				return h + 90
			},
			_drawRoundRect(ctx, x, y, w, h, r) {
				ctx.beginPath()
				// 左上角
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
				ctx.closePath()
				// ctx.strokeStyle = '#D8D8D8';
				ctx.fillStyle = '#FFFFFF';
				// ctx.stroke()
				ctx.fill()
			},
			drawRoundRect(ctx, x, y, w, h, r, lineWidth) {
				ctx.save()
				//this._drawRoundRect(ctx, x, y, w, h, r)
				ctx.clip()
				// draw left border
				ctx.fillStyle = '#EEEEEE'
				var y=uni.upx2px(619)
				var bWidth=uni.upx2px(600)
			    ctx.fillRect(0, y, bWidth, 2)
				ctx.restore()
			},
			drawRoundRectAvatar(ctx, x, y, w, h, r, imgPath) {
				ctx.save()
				this._drawRoundRect(ctx, x, y, w, h, r)
				ctx.clip()
				ctx.drawImage(imgPath, x, y, w, h)
				ctx.restore()
			},
			// TODO: measureText not works in App
			drawTextInLines(ctx, t, x, y, w, lineHeight) {
				const chr = t.split("")
				let temp = ''
				let row = []
				for (let i = 0; i < chr.length; i++) {
					if (ctx.measureText(temp).width < w) {
						//
					} else {
						row.push(temp)
						temp = ''
					}
					temp += chr[i]
				}
				row.push(temp)
				for (const i in row) {
					// i + 1 will be 11, 21,...
					ctx.fillText(row[i], x, (y + (i * 1 + 1) * lineHeight))
				}
				return row.length
			},
			// TODO: measureText not works in app
			drawTextInOneLine(ctx, t, x, y, w) {
				const chr = t.split('')
				let temp = ''
				for (let i = 0; i < chr.length; i++) {
					if (ctx.measureText(temp + '...').width <= w) {
						temp += chr[i]
					} else {
						temp = temp.substring(0, temp.length - 1)
						temp += '...'
						break
					}
				}
				ctx.fillText(temp, x, y)
			},
			downloadImage(url) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: url,
						success: (res) => {
							return resolve(res)
						},
						fail: (err) => {
							return reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		height: 100vh;
		background: url('http://dmsphoto.66km.com.cn/thFiles/83BDAB66-DD76-4F3A-92B3-F6AF0BA57A9E.png');
		background-size: 100% 100%;
	}
	.downloadBtn{
		width: 329rpx;
		height: 92rpx;
		background: url('http://dmsphoto.66km.com.cn/thFiles/A0CF4704-69A8-4DAC-8943-75F98D1349DD.png');
		background-size: 100% 100%;
		line-height: 92rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #DC490A;
		margin: 0 auto;
	}
</style>