微信小程序 自定义图片分享-绘制数据图片以及信息文字

一 、需求

从数据库中读取头像，姓名电话等信息，当分享给女朋友时，每个信息不一样

二、实现方案

1、先将数据库中需要的头像姓名信息读取出来加载到data 数据项中

data:{
     firstName:'', // 姓名
      img:'', // 头像
     shareImage:'',// 存储临时图片
}

2、当进入页面时，就产生图片，分享时直接分享 在小程序onLoad函数中实现

    // 生成分享图片
    generateShareImage() {

        // 进入页面就下载头像到临时地址中
        const imgUrl = app.globalData.base_url +'uploads/lawyer/'+this.data.img
        wx.downloadFile({
            url: imgUrl,
            success: (res) => {
              if (res.statusCode === 200) {

                // 下载成功，获取临时路径
                const tempFilePath = res.tempFilePath;
                console.log("666"+tempFilePath)

                // 开始绘制 注意这里
                this.drawPoster(tempFilePath);
              }
            },
            fail: (err) => {
              console.error('图片下载失败:', err);
            }
        });
    },

    // 绘制海报
    drawPoster(avatarPath){
        // createCanvasContext 绘制方法
        const ctx = wx.createCanvasContext('shareCanvas');

        // 绘制背景图（可以是本地或网络路径）
        const bgImagePath = '/images/sharebg.jpg'; // 替换为你的背景图地址

        // 1. 绘制背景图
        ctx.drawImage(bgImagePath, 0, 0, this.data.canvasWidth, this.data.canvasHeight);

        // 2. 设置字体样式
        ctx.setFontSize(10);
        ctx.setFillStyle('black');

        // 3. 绘制姓名头像
        if(avatarPath){
            ctx.save()
            ctx.arc(40, 30, 11 * 2, 0, 2 * Math.PI) // 圆形边框
            //ctx.strokeStyle = '#1A1A1A' // 设置绘制圆形边框的颜色
            ctx.stroke() // 绘制出圆形，默认为黑色，可通过 ctx.strokeStyle = '#FFFFFF'，设置想要的颜色
            ctx.clip()
            ctx.drawImage(avatarPath,  8, 6, 70, 70) // 图像大小
            ctx.restore()
        }

        // ctx.fillText(`${this.data.firstName}`, 100, 50);
        drawMultiLineText(ctx,`${this.data.firstName}`,80,28,50, 14, 14);

       
        drawMultiLineText(ctx,`${this.data.title}`,80,45,50, 14, 10);

       
        // ctx.fillText(`${this.data.mobilePhoneNumber}`, 10, 90);
        drawMultiLineText(ctx,`${this.data.mobilePhoneNumber}`,35,70,100, 14, 10);

        
        // ctx.fillText(`${this.data.email}`,10,110);
        drawMultiLineText(ctx,`${this.data.email}`,35,90,110, 14, 10);

       
        drawMultiLineText(ctx,`${this.data.address_details}`,35,109,90, 16, 10);

        // 5. 绘制完成
        ctx.draw(false, () => {

          // 6. 将 Canvas 导出为临时图片路径
          wx.canvasToTempFilePath({

            canvasId: 'shareCanvas',
            success: (res) => {
              // res.tempFilePath 是生成的临时图片路径
              console.log(this.data.mobilePhoneNumber)
              this.setData({
                shareImage: res.tempFilePath
              });
              // 触发分享
              this.onShareAppMessage();
            },
            fail: (err) => {
              wx.showToast({ title: '生成图片失败', icon: 'none' });
            }
          });
        });
    },

onLoad(options){
     // 调用绘制方法
    this.generateShareImage()
}

3、分享图片

onShareAppMessage 触发分享

 onShareAppMessage() {
        return {
            title:'标题',//标题
            path: '/pages/index/index',//路径
            imageUrl: this.data.shareImage//图片
        }
    }