template
<view class="hideCanvasView">
<canvas class="shareCanvas" canvas-id="shareCanvas" style="width: 452px; height: 362px;"></canvas>
</view>
js
需要分享的页面加上onShareAppMessage，在methods中定义绘画方法createCanvasImage文章来源：https://www.toymoban.com/news/detail-634261.html
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这里是画布的内容设置文章来源地址https://www.toymoban.com/news/detail-634261.html
.hideCanvasView{
position: relative;
}
.shareCanvas {
position: fixed;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
到了这里，关于uniapp微信小程序使用canvas自定义分享名片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
