效果如果所示：

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>