效果如果所示：
image.png
1、实现思路
1、先定义一个canvas容器，必须有canvas-id且是唯一的，用于展示画的图
注意点：①.一定要定义这个容器，不然图片展示不出来
2、定义画图的事件，画完图之后生成一个图片的地址
注意点：
①.画布生成图片(ctx.draw)是异步的,所以使用了Promise进行处理
②.ctx.drawImage()第一个参数所要绘制的图片资源不能是网络图片，如果是网络图片需要使用uni.downloadFile()或者uni.getImageInfo()进行处理，切记不能是网络图片必须进行处理
③.
3、在onShareAppMessage()分享事件中调用画图的方法
注意点：
①.这里需要async await接收
2、实现步骤
// 1、定义一个canvas容器
<template>
<canvas canvas-id="shareCanvas" style="width: 200px; height: 150px;"/>
</template>
<script>
export default{
// 3、分享的点击事件
async onShareAppMessage(res) {
if (res.from === 'menu') {
console.log('分享按钮', res.target)
}
try {
uni.showLoading({ title: '分享信息生成中', mask: true })
const imageUrl = await this.selfShareImg()
uni.hideLoading()
return {
title: this.detaillist.goods_name,
path: '/pages/index/index', // 这里是你的分享里面的跳转地址
imageUrl: imageUrl
}
} catch (error) {
uni.hideLoading()
}
},
// 2、自定义分享链接的图片
methods:{
selfShareImg() {
return new Promise(async (resolve, reject) => {
try {
const ctx = uni.createCanvasContext('shareCanvas', this);
// 使用下载的文件路径
uni.downloadFile({
url: this.detaillist.image, // 你的图片路径（我这个是后端返回的商品图片）
success: (res) => {
if (res.statusCode === 200) {
ctx.drawImage(res.tempFilePath, 0, 0, 210, 170); // 渲染图片到canvas
}
// 绘制“立即购买”按钮
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, '#ffa602');
grd.addColorStop(1, '#fe7704');
ctx.setFillStyle(grd);
ctx.fillRect(110, 115, 74, 30); // 按钮的矩形区域
ctx.setFontSize(16);
ctx.setTextAlign('center');
ctx.setFillStyle('#fff');
ctx.fillText('立即购买', 145, 135); // 按钮文字
// 绘制完成后生成临时图片路径
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: (res) => {
return resolve(res.tempFilePath);
},
fail: (error) => {
console.log('fail----fail', error);
return reject(error);
}
}, this);
});
},
fail: (error) => {
console.log('downloadFile failed', error);
return reject(error);
}
});
} catch (err) {
console.log(err);
reject(err);
}
});
},
}
}
</script>
