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) {
			      //返回零時(shí)地址
				  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); // 文字字號(hào)
			ctx.fillText(self.CustomerDetail.name, 124, 64); // 繪制文字
			//班級(jí)
			ctx.setFillStyle('#ffffff'); // 文字顏色
			ctx.setFontSize(20); // 文字字號(hào)
			ctx.fillText('MBA班級(jí)：'+self.CustomerDetail.className, 124, 100); // 繪制文字
			//公司圖標(biāo)
			ctx.drawImage('../../static/gs.png', 28, 136, 24, 24);
			//公司名稱
			ctx.setFillStyle('#ffffff'); // 文字顏色
			ctx.setFontSize(20); // 文字字號(hào)
			ctx.fillText(self.CustomerDetail.company , 64, 154); // 繪制文字
			//職位圖標(biāo)
			ctx.drawImage('../../static/zw.png', 28, 174, 24, 24);
			//職位名稱
			ctx.setFillStyle('#ffffff'); // 文字顏色
			ctx.setFontSize(20); // 文字字號(hào)
			ctx.fillText(self.CustomerDetail.position, 64, 192); // 繪制文字
			//地址圖標(biāo)
			ctx.drawImage('../../static/dz.png', 28, 212, 24, 24);
			//地址名稱
			ctx.setFillStyle('#ffffff'); // 文字顏色
			ctx.setFontSize(20); // 文字字號(hào)
			
			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); // 文字字號(hào)
			ctx.fillText('瀏覽個(gè)人資料', 158, 324); // 繪制文字
		
			ctx.draw(false, ((ret) => {
				// canvas畫布轉(zhuǎn)成圖片并返回圖片地址
				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') { // 來自頁面內(nèi)分享按鈕
		console.log('分享', res.target)
	}
	//當(dāng)canvas還未渲染完成時(shí)等待完成
	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這里是畫布的內(nèi)容設(shè)置文章來源地址http://www.zghlxwxcb.cn/news/detail-634261.html

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

到了這里，關(guān)于uniapp微信小程序使用canvas自定義分享名片的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！