微信小程序海报分享

<template>
	<view class="canvasbox">
		<canvas :style="{ width: curWidth + 'px', height: curHeight + 'px' }" canvas-id="mycanvas" class="mycanvas">
		</canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ctx: null,
				curWidth: null,
				curHeight: null,
				goodsImg: null,
				goodsImgUrl: 'https://img1.baidu.com/it/u=1303678548,2241010228&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
			};
		},

		async onLoad() {
			this.getSystemInfo()

			this.goodsImg = await this.getImageInfo(this.goodsImgUrl)

			this.initCanvas()
		},

		methods: {
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						this.curWidth = res.windowWidth
						this.curHeight = res.windowHeight
					}
				})
			},

			initCanvas() {
				this.ctx = uni.createCanvasContext('mycanvas', this)

				// // 绘制商品信息
				// this.drawText('Apple/苹果 iPhone 11全新正品国行全网通4G智能手机苹果SE2', this.curWidth - 150, 2, 10, this.curWidth + 24)

				// // 绘制图片
				// this.ctx.drawImage(this.goodsImg, 0, 0, this.curWidth, this.curWidth)
				// this.ctx.drawImage(this.goodsImg, this.curWidth - 130, this.curWidth + 10, 120, 120)

				// // 绘制价格
				// this.ctx.setFontSize(16) // 字号
				// this.ctx.setFillStyle('#e31d1a') // 颜色
				// this.ctx.fillText('￥520.00', 10, this.curWidth + 80); // （文字，x，y）

				// // 绘制原价
				// this.ctx.setFontSize(12) // 字号
				// this.ctx.setFillStyle('#b8b8b8') // 颜色
				// this.ctx.fillText('原价:￥698.00', 88, this.curWidth + 80); // （文字，x，y）

				// // 用户昵称
				// this.ctx.setFontSize(16)
				// this.ctx.setFillStyle('#333')
				// this.ctx.fillText('不要再想她 推荐给你', 10, this.curWidth + 105);

				// // 扫码提示
				// this.ctx.setFontSize(14)
				// this.ctx.setFillStyle('#b8b8b8')
				// this.ctx.fillText('长按或扫描识别二维码', 10, this.curWidth + 130);

				// // 将内容绘制到画布上
				// this.ctx.draw(true)

				// 绘制盒子
				this.drawBlock('pink')
				
				// 绘制图片
				this.drawImage(this.goodsImgUrl)
			},

			// 获取图片信息
			getImageInfo(url) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: url,
						success: (res) => {
							req(res.path)
						},
					});
				})
			},

			// 绘制文字（处理文字换行）
			drawText(text, width, maxLine, left, top, lineHeight = 20, color = '#333', fontSize = 16) {
				// 文字大小
				this.ctx.setFontSize(fontSize)
				// 文字颜色
				this.ctx.setFillStyle(color)
				// 文本处理
				let textArr = text.split('') // 字符串转数组
				let rowList = [] // 行文本数据
				let columText = '' // 单行文本数据
				textArr.forEach(item => { // 处理成行文本
					if (this.ctx.measureText(columText).width < width) {
						columText += item
					} else {
						rowList.push(columText)
						columText = item
					}
				})
				rowList.push(columText)
				console.log(rowList, 'rowList');

				if (rowList.length >= maxLine) { // 处理溢出显示'...'
					let newRowList = rowList.splice(0, maxLine)
					let targetColum = newRowList[maxLine - 1].split('')
					let targetText = ''
					targetColum.forEach(item => {
						if (this.ctx.measureText(targetText).width < width - this.ctx.measureText('...').width) {
							targetText += item
						}
					})
					targetText += '...'
					newRowList[maxLine - 1] = targetText
					rowList = newRowList
					console.log(newRowList, 'newRowList');
				}

				// 绘制文本
				rowList.forEach((item, index) => {
					this.ctx.fillText(item, left, top + index * lineHeight, width)
				})
			},

			// 绘制盒子
			drawBlock(color = '#333', width = 40, height = 40, left = 'center', top = this.curWidth + 140, radius = 10) {
				if (left === 'center') {
					left = this.curWidth / 2 - width / 2
				}
				this.ctx.beginPath()
				this.ctx.setFillStyle(color) // 设置填充颜色
				this.ctx.setStrokeStyle(color) // 设置画线颜色
				// 起点为什么要＋radius 最后一段弧线与直线的切点刚好在这个点（画完之后当前点和起始点一致）
				this.ctx.moveTo(left + radius, top) // 设置起点
				// arcTo(x1, y1, x2, y2，r)
				// arcTo之后 当前点的位置是圆弧与x1, y1和x2, y2这条线的切点
				this.ctx.arcTo(left + width, top, left + width, top + height, radius)
				this.ctx.arcTo(left + width, top + height, left, top + height, radius)
				this.ctx.arcTo(left, top + height, left, top, radius)
				this.ctx.arcTo(left, top, left + width, top, radius)
				this.ctx.stroke() // 绘制边框
				this.ctx.fill() // 填充
				this.ctx.draw(true)
			},
			
			// 绘制图片
			async drawImage(url, width = 40, height = 40, left = 'center', top = this.curWidth + 200, radius = '50%') {
				const imgUrl = await this.getImageInfo(url)
				
				if (left === 'center') {
					left = this.curWidth / 2 - width / 2
				}
			
				if(radius) {
					this.ctx.save() // 保存当前画布区域
					this.ctx.beginPath()
					if(radius == '50%') { // 圆
						this.ctx.arc(left + width / 2, top + height / 2, width / 2, 0, Math.PI * 2, false)
					} else {
						this.ctx.moveTo(left + radius, top) // 设置起点
						// arcTo(x1, y1, x2, y2，r)
						// arcTo之后 当前点的位置是圆弧与x1, y1和x2, y2这条线的切点
						this.ctx.arcTo(left + width, top, left + width, top + height, radius)
						this.ctx.arcTo(left + width, top + height, left, top + height, radius)
						this.ctx.arcTo(left, top + height, left, top, radius)
						this.ctx.arcTo(left, top, left + width, top, radius)
					}
					this.ctx.clip() // 剪切区域 （限制区域）
				}
				this.ctx.drawImage(imgUrl, left, top, width, height)
				this.ctx.restore() // 恢复原始画布
				this.ctx.draw(true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mycanvas {
		background-color: #fff;
	}
</style>