Uniapp简易使用canvas绘制分享海报

技术分享 8个月前 (07-07) 0 999+

关注

使用UniApp Canvas实现分享海报

一、分享海报

现在使用 Uniapp 中的 canvas 简单实现下商品的分享海报，附上二维码（这个可以附上各种信息例如分享绑定下单等关系）,开箱即用。

动态生成包含商品信息、用户二维码的分佣海报
一键保存到手机相册
支持App原生分享和小程序分享
打通社交裂变传播路径

注：这里的分享功能用了微信的 showShareImageMenu，会调起朋友分享、朋友圈分享、收藏、保存图片等，会跟页面功能重复，并且使用这个接口记得绑定项目的 appid，否则会报错。

二、技术支持（使用 Uniapp canvas，直接复制进行更改就行）

<template> 	<view class="container"> 		<!-- 商品展示区域 --> 		<view class="product-canvas"> 			<canvas canvas-id="productCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" 				id="productCanvas" class="canvas" /> 			<loading v-if="loading"></loading> 		</view>  		<!-- 四个功能按钮 --> 		<view class="functions"> 			<view class="function-item" @tap="shareToFriend"> 				<view class="icon-circle icon-share"></view> 				<text class="function-text">发送给朋友</text> 			</view> 			<view class="function-item" @tap="shareToMoments"> 				<view class="icon-circle icon-moments"></view> 				<text class="function-text">分享到朋友圈</text> 			</view> 			<view class="function-item" @tap="collectProduct"> 				<view class="icon-circle icon-collect"></view> 				<text class="function-text">收藏</text> 			</view> 			<view class="function-item" @tap="savePoster"> 				<view class="icon-circle icon-save"></view> 				<text class="function-text">保存图片</text> 			</view> 		</view>  <!-- 		<view class="" @click="close" style="         position: absolute;         left: 50%;         bottom: 50rpx;         transform: translateX(-50%);       "> 			<image src="作为组件底部叉叉" mode="widthFix" style="width: 50rpx; height: auto"></image> 		</view> --> 	</view> </template>  <script> 	export default { 		data() { 			return { 				canvasWidth: 355, // px 				canvasHeight: 425, 				loading: false, 				canvasPath: "", 				product: { 					name: "海天调味品十件套", 					desc_text: "精选优质原料，家庭烹饪必备套装，含酱油、蚝油、陈醋、料酒等多种调味品", 					market_price: 39.9, 					pic: "https://dummyimage.com/180x230/f5f5f5/999", 				}, 				qrcode: "https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://shop.example.com", 			}; 		}, 		onLoad() { 			this.open() 		}, 		methods: { 			open() { 				this.drawCanvas(); 			}, 			close() { 				this.$emit("update:show", !this.show); 			}, 			shareToFriend() { 				const that = this; 				// #ifdef APP 				uni.share({ 					provider: "weixin", 					scene: "WXSceneSession", 					type: 2, 					imageUrl: that.canvasPath, 					success(res) { 						console.log("分享给朋友成功", res); 						uni.showToast({ 							title: "已分享给朋友", 							icon: "success", 						}); 					}, 					fail(err) { 						console.log("分享给朋友失败", err); 						uni.showToast({ 							title: "分享失败，请重试", 							icon: "none", 						}); 					}, 				}); 				// #endif 				// #ifdef MP-WEIXIN 				uni.showShareImageMenu({ 					path: that.canvasPath, 					success() {}, 					fail(err) { 						console.log(err) 					} 				}); 				// #endif 			}, 			shareToMoments() { 				const that = this; 				// #ifdef APP 				uni.share({ 					provider: "weixin", 					scene: "WXSceneTimeline", 					type: 2, 					imageUrl: that.canvasPath, 					success(res) { 						console.log("分享到朋友圈成功", res); 						uni.showToast({ 							title: "已分享到朋友圈", 							icon: "success", 						}); 					}, 					fail(err) { 						console.log("分享到朋友圈失败", err); 						uni.showToast({ 							title: "分享失败，请重试", 							icon: "none", 						}); 					}, 				}); 				// #endif 				// #ifdef MP-WEIXIN 				wx.showShareImageMenu({ 					path: that.canvasPath, 					success() {}, 				}); 				// #endif 			}, 			collectProduct() { 				// #ifdef MP-WEIXIN 				const that = this; 				wx.addFileToFavorites({ 					filePath: that.canvasPath, 					success: function() { 						console.log("收藏成功"); 						uni.showToast({ 							title: "收藏成功", 							icon: "success", 						}); 					}, 					fail: function(err) { 						console.error("收藏失败：", err); 						uni.showToast({ 							title: "收藏失败", 							icon: "error", 						}); 					}, 				}); 				// #endif 			}, 			savePoster() { 				const that = this; 				uni.saveImageToPhotosAlbum({ 					filePath: that.canvasPath, 					success(res) { 						uni.showToast({ 							title: "保存成功", 							icon: "success", 						}); 					}, 				}); 			}, 			async drawCanvas() { 				this.loading = true; 				const that = this; 				const dpr = uni.getSystemInfoSync().pixelRatio; 				const width = this.canvasWidth; 				const height = this.canvasHeight; 				const ctx = uni.createCanvasContext("productCanvas", this); 				// ctx.canvas.width = width * dpr; 				// ctx.canvas.height = height * dpr; 				// ctx.scale(dpr, dpr); 				const { 					pic: image, 					name: title, 					desc_text: desc, 					market_price: price, 				} = this.product; 				const qrcode = this.qrcode; 				// 背景白色 + 红色边框 				const borderMargin = 20; 				const borderWidth = 3; 				ctx.setFillStyle("#fff"); 				ctx.fillRect(0, 0, width, height); 				ctx.setStrokeStyle("#e60012"); 				ctx.setLineWidth(borderWidth); 				// 边框内缩绘制 				ctx.strokeRect( 					borderMargin + borderWidth / 2, 					borderMargin + borderWidth / 2, 					this.canvasWidth - 2 * (borderMargin + borderWidth / 2), 					this.canvasHeight - 2 * (borderMargin + borderWidth / 2) 				);  				// 徽章 				const badgeX = 190; 				const badgeY = 5; 				const badgeW = 125; 				const badgeH = 30; 				const badgeRadius = 15;  				// 阴影模拟（底层填充深色模糊） 				ctx.setFillStyle("rgba(230, 0, 18, 0.1)"); 				ctx.beginPath(); 				ctx.moveTo(badgeX + badgeRadius, badgeY + 4); 				ctx.arcTo( 					badgeX + badgeW, 					badgeY + 4, 					badgeX + badgeW, 					badgeY + badgeH + 4, 					badgeRadius 				); 				ctx.arcTo( 					badgeX + badgeW, 					badgeY + badgeH + 4, 					badgeX, 					badgeY + badgeH + 4, 					badgeRadius 				); 				ctx.arcTo(badgeX, badgeY + badgeH + 4, badgeX, badgeY + 4, badgeRadius); 				ctx.arcTo(badgeX, badgeY + 4, badgeX + badgeW, badgeY + 4, badgeRadius); 				ctx.closePath(); 				ctx.fill();  				// 绘制渐变圆角背景 				const gradient = ctx.createLinearGradient(badgeX, 0, badgeX + badgeW, 0); 				gradient.addColorStop(0, "#ff4d6d"); 				gradient.addColorStop(1, "#e60012");  				ctx.setFillStyle(gradient); 				ctx.beginPath(); 				ctx.moveTo(badgeX + badgeRadius, badgeY); 				ctx.arcTo( 					badgeX + badgeW, 					badgeY, 					badgeX + badgeW, 					badgeY + badgeH, 					badgeRadius 				); 				ctx.arcTo( 					badgeX + badgeW, 					badgeY + badgeH, 					badgeX, 					badgeY + badgeH, 					badgeRadius 				); 				ctx.arcTo(badgeX, badgeY + badgeH, badgeX, badgeY, badgeRadius); 				ctx.arcTo(badgeX, badgeY, badgeX + badgeW, badgeY, badgeRadius); 				ctx.closePath(); 				ctx.fill();  				// 白色文字 				ctx.setFontSize(14); 				ctx.setFillStyle("#fff"); 				ctx.setTextAlign("center"); 				ctx.setTextBaseline("middle"); 				ctx.fillText("分享海报", badgeX + badgeW / 2, badgeY + badgeH / 2);  				// 商品图 				await this.drawImage(ctx, image, 40, 50, 120, 150);  				// 标题 				ctx.setFontSize(18); 				ctx.setFillStyle("#333"); 				ctx.setTextAlign("left"); 				ctx.font = "bold 18px sans-serif"; 				const titleLines = this.splitText(title, 160, ctx); 				titleLines.forEach((line, index) => { 					ctx.fillText(line, 170, 60 + index * 20); 				});  				// 描述（多行） 				ctx.setFontSize(14); 				ctx.setFillStyle("#666"); 				const lines = this.splitText(desc, 160, ctx); 				lines.forEach((line, index) => { 					ctx.fillText(line, 170, 85 + titleLines.length * 20 + index * 18); 				});  				// 价格 				ctx.setFontSize(20); 				ctx.setFillStyle("#e60012"); 				ctx.fillText( 					"￥" + price.toFixed(2), 					170, 					110 + titleLines.length * 20 + lines.length * 18 				);  				// 小店名 				ctx.setFontSize(16); 				ctx.setFillStyle("#07c160"); 				ctx.fillText( 					"微信小店", 					50, 					200 + titleLines.length * 20 + lines.length * 18 				);  				// 提示 				ctx.setFontSize(12); 				ctx.setFillStyle("#999"); 				ctx.fillText( 					"微信扫一扫购买", 					45, 					230 + titleLines.length * 20 + lines.length * 18 				);  				// 二维码 				await this.drawImage( 					ctx, 					qrcode, 					200, 					160 + titleLines.length * 20 + lines.length * 18, 					90, 					90 				);  				ctx.draw(true, () => { 					setTimeout(() => { 						uni.canvasToTempFilePath({ 								destWidth: that.canvasWidth, 								destHeight: that.canvasHeight, 								canvasId: "productCanvas", 								success: (res) => { 									console.log("临时图片路径：", res.tempFilePath); 									that.canvasPath = res.tempFilePath; 								}, 							}, 							that 						); 					}, 100); 				}); 			},  			// 远程图片绘制 			drawImage(ctx, src, x, y, w, h) { 				return new Promise((resolve) => { 					uni.getImageInfo({ 						src, 						success: (res) => { 							ctx.drawImage(res.path, x, y, w, h); 							this.loading = false; 							resolve(); 						}, 						fail: () => { 							console.warn("图片加载失败", src); 							this.loading = false; 							resolve(); 						}, 					}); 				}); 			},  			// 文本换行 			splitText(text, maxWidth, ctx) { 				const result = []; 				let temp = ""; 				for (let char of text) { 					const testLine = temp + char; 					const { 						width 					} = ctx.measureText(testLine); 					if (width > maxWidth) { 						result.push(temp); 						temp = char; 					} else { 						temp = testLine; 					} 				} 				if (temp) result.push(temp); 				return result; 			}, 		}, 	}; </script> <style scoped> 	.container { 		height: 100vh; 		width: 100%; 		display: flex; 		flex-direction: column; 		justify-content: space-between; 	}  	/* 商品展示区域 - Canvas */ 	.product-canvas { 		width: 100%; 		background: linear-gradient(135deg, #fff8f8, #fff); 		position: relative; 		display: flex; 		flex-direction: column; 		justify-content: center; 		align-items: center; 		padding: 50rpx 0; 	}  	.canvas { 		width: 315px; 		height: 425px; 	}  	.canvas-content { 		width: 90%; 		height: 85%; 		background: #fff; 		border: 3px solid #e60012; 		border-radius: 12px; 		box-shadow: 0 8px 20px rgba(230, 0, 18, 0.1); 		padding: 20rpx; 		position: relative; 	}  	.badge { 		position: absolute; 		top: -16px; 		right: 20px; 		background: linear-gradient(to right, #ff4d6d, #e60012); 		color: white; 		padding: 8px 16px; 		border-radius: 20px; 		font-weight: bold; 		font-size: 14px; 		box-shadow: 0 4px 10px rgba(230, 0, 18, 0.3); 	}  	.product-info { 		display: flex; 		height: 100%; 	}  	.product-image { 		flex: 1; 		background: #f9f9f9; 		border-radius: 8px; 		display: flex; 		justify-content: center; 		align-items: center; 		overflow: hidden; 	}  	.product-image img { 		width: 100%; 		height: 100%; 		object-fit: contain; 	}  	.product-details { 		flex: 1; 		padding: 20rpx; 		display: flex; 		flex-direction: column; 		justify-content: space-between; 	}  	.product-title { 		font-size: 32rpx; 		font-weight: bold; 		color: #333; 		margin-bottom: 10px; 	}  	.product-desc { 		font-size: 14px; 		color: #666; 		line-height: 1.5; 	}  	.price { 		margin: 15px 0; 		color: #e60012; 		font-weight: bold; 		font-size: 38rpx; 	}  	.qrcode-section { 		display: flex; 		align-items: center; 		justify-content: space-between; 		margin-top: 20px; 		padding-top: 15px; 		border-top: 1px dashed #eee; 	}  	.qrcode { 		width: 100px; 		height: 100px; 		background: #f5f5f5; 		display: flex; 		justify-content: center; 		align-items: center; 		margin-bottom: 8px; 	}  	.qrcode-hint { 		color: #999; 		font-size: 12px; 	}  	.wx-store { 		color: #07c160; 		font-weight: bold; 		font-size: 15px; 		margin-top: 5px; 	}  	/* 功能区样式 */ 	.functions { 		display: flex; 		flex-direction: row; 		background-color: #fff; 		padding: 25px 10px; 		border-top: 1px solid #f0f0f0; 	}  	.function-item { 		flex: 1; 		display: flex; 		flex-direction: column; 		align-items: center; 		padding: 10px 0; 		transition: all 0.3s; 	}  	.function-item:active { 		background-color: #f9f9f9; 		transform: translateY(2px); 	}  	.icon-circle { 		width: 70rpx; 		height: 70rpx; 		border-radius: 50%; 		display: flex; 		justify-content: center; 		align-items: center; 		margin-bottom: 12rpx; 	}  	.icon-share { 		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 	}  	.icon-moments { 		background: linear-gradient(135deg, #3ae7b1 0%, #00d2a9 100%); 	}  	.icon-collect { 		background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); 	}  	.icon-save { 		background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); 	}  	.function-text { 		font-size: 26rpx; 		color: #555; 	} </style>

三、性能优化与注意事项

1. 使用问题

Canvas 问题：这里的 canvas 宽高使用固定的px格式，这里没做过多的适配，需要各位自己进行适配，并且绘制的时候 canvas 的背景设置的是白色，因为要作为图片进行保存，如果对其分装为组件的时候要注意层级关系并且白色背景跟 mask 背景和组件背景要做好适配兼容。还有 canvas 顶部的徽章在真机可能没有那么好看，自己再进行优化吧。
模糊问题：使用pixelRatio适配高分屏，上面没做，注释了
文字溢出：这里的文字有做分割，如果过长可能还需进行优化