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

一 、需求

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

二、实现方案

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

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

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

    // 生成分享图片generateShareImage() {// 进入页面就下载头像到临时地址中const imgUrl = app.globalData.base_url +'uploads/lawyer/'+this.data.imgwx.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//图片}}