uniapp微信小程序使用canvas自定义分享名片

template

<view class="hideCanvasView">
	<canvas class="shareCanvas" canvas-id="shareCanvas" style="width: 452px; height: 362px;"></canvas>
</view>

js
需要分享的页面加上onShareAppMessage，在methods中定义绘画方法createCanvasImage

methods:{
	createCanvasImage(avatar) {
		let self = this;
		//下载获取头像
		let headImg = new Promise(function(resolve) {
			wx.downloadFile({
			    url: avatar,
			    success: function (res) {
			      //返回零时地址
				  resolve(res.tempFilePath);
			    }
			}) 
		});
		Promise.all([headImg]).then(function(result) {
		console.log("开始绘制分享背景图",result)
		setTimeout(() => {
			const ctx = uni.createCanvasContext('shareCanvas');
			//清空画布
			ctx.clearRect(0, 0, 452, 362);
			//背景图片
			ctx.drawImage('../../static/share_bg.png', 0, 0, 452, 362);
			//头像的白色边框
			ctx.arc(68, 70, 44, 0, 2 * Math.PI);
			ctx.setFillStyle('#ffffff');
			ctx.fill();
			//头像
			ctx.save()
			ctx.beginPath()
			ctx.arc(68, 70, 40, 0, 2 * Math.PI)
			ctx.clip()
			ctx.drawImage(result[0], 30, 32, 80, 80)
			ctx.restore()
			//名称
			ctx.setFillStyle('#ffffff'); // 文字颜色
			ctx.setFontSize(34); // 文字字号
			ctx.fillText(self.CustomerDetail.name, 124, 64); // 绘制文字
			//班级
			ctx.setFillStyle('#ffffff'); // 文字颜色
			ctx.setFontSize(20); // 文字字号
			ctx.fillText('MBA班级：'+self.CustomerDetail.className, 124, 100); // 绘制文字
			//公司图标
			ctx.drawImage('../../static/gs.png', 28, 136, 24, 24);
			//公司名称
			ctx.setFillStyle('#ffffff'); // 文字颜色
			ctx.setFontSize(20); // 文字字号
			ctx.fillText(self.CustomerDetail.company , 64, 154); // 绘制文字
			//职位图标
			ctx.drawImage('../../static/zw.png', 28, 174, 24, 24);
			//职位名称
			ctx.setFillStyle('#ffffff'); // 文字颜色
			ctx.setFontSize(20); // 文字字号
			ctx.fillText(self.CustomerDetail.position, 64, 192); // 绘制文字
			//地址图标
			ctx.drawImage('../../static/dz.png', 28, 212, 24, 24);
			//地址名称
			ctx.setFillStyle('#ffffff'); // 文字颜色
			ctx.setFontSize(20); // 文字字号
			
			let address=self.region[0][self.regionindex[0]].label?self.region[0][self.regionindex[0]].label:''+'-'
			+self.region[1][self.regionindex[1]].label?self.region[1][self.regionindex[1]].label:''+'-'
			+self.region[2][self.regionindex[2]].label?self.region[2][self.regionindex[2]].label:'';
			ctx.fillText(address, 64, 230); // 绘制文字
			//绘制虚线
			ctx.setLineDash([2, 4], 1);
			ctx.beginPath();
			ctx.moveTo(12, 264);
			ctx.lineTo(440, 264);
			ctx.setStrokeStyle('#ffffff')
			ctx.stroke();
			//绘制底部按钮
			let x = 126,
				y = 286,
				w = 194,
				h = 56,
				r = 30;
			if (w < 2 * r) r = w / 2;
			if (h < 2 * r) r = h / 2;
			ctx.beginPath();
			ctx.moveTo(x + r, y);
			ctx.arcTo(x + w, y, x + w, y + h, r);
			ctx.arcTo(x + w, y + h, x, y + h, r);
			ctx.arcTo(x, y + h, x, y, r);
			ctx.arcTo(x, y, x + w, y, r);
			ctx.closePath();
			//按钮渐变色
			const grd = ctx.createLinearGradient(x, y, x + w, y)
			grd.addColorStop(0, '#FFFFFF')
			grd.addColorStop(1, '#F0ECFF')
			ctx.setFillStyle(grd)
			ctx.fill()
		
			//绘制按钮文字
			ctx.setFillStyle('#7657ef'); // 文字颜色
			ctx.setFontSize(22); // 文字字号
			ctx.fillText('浏览个人资料', 158, 324); // 绘制文字
		
			ctx.draw(false, ((ret) => {
				// canvas画布转成图片并返回图片地址
				wx.canvasToTempFilePath({
					canvasId: 'shareCanvas',
					success: function(res) {
						self.canvasToTempFilePath = res.tempFilePath;
						console.log('绘制成功-------------', res.tempFilePath);
					},
					fail: function(error) {
						console.log('绘制失败-------------', error);
					},
					complete: function() {
					}
				});
			}));
		}, 1000)});
	},
},
onShareAppMessage(res) {
	if (res.from === 'button') { // 来自页面内分享按钮
		console.log('分享', res.target)
	}
	//当canvas还未渲染完成时等待完成
	if(!this.canvasToTempFilePath){
		console.log("未渲染完成")
		setTimeout(() => {},1000)
	}
	return {
		title: '我是'+this.CustomerDetail.company+'的'+this.CustomerDetail.name,
		imageUrl: this.canvasToTempFilePath,
		path: '/pages/memberManage/memberInfo?customerId=' + this.customerId
	}
}

css这里是画布的内容设置

.hideCanvasView{
	position: relative;
}
.shareCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}