/** * 绘制分享图片 */function drawImage(page){ if (page != null && page != '' && page != undefined){ var that = page; const ctx = wx.createCanvasContext('myCanvas') var partner_data = that.data.partner_data; var bj = partner_data.photo; //背景图片和昵称 var txPath = bj ? bj : that.data.imgSrcList[7]; var bjPath = that.data.imgSrcList[8]; var qrCode = that.data.qrcode_temp; var hostNickname = app.globalData.userInfo.nickName; //绘制背景图片 ctx.setFillStyle('#FFFEFF'); ctx.drawImage(bjPath,0,0,380,426); ctx.drawImage(txPath, 0, 0, 137, 192); //绘制小程序码: ctx.drawImage(qrCode, 122, 220, 136, 136); //绘制标题 ctx.setFontSize(15); ctx.setFillStyle("#f56400"); ctx.fillText(partner_data.partner_name, 315, 30) ctx.setFillStyle("#ffffff"); ctx.setFontSize(20) ctx.fillText(partner_data.name, 149, 50) ctx.fillText(partner_data.title, 149, 80) ctx.setFontSize(13) ctx.fillText(partner_data.depart, 165, 103) ctx.fillText(partner_data.phone, 165, 122) ctx.fillText(partner_data.email, 165, 142) ctx.fillText(partner_data.address, 165, 162) ctx.setFillStyle("black"); ctx.fillText('长按识别二维码 收下名片', 120, 378) ctx.draw( false, setTimeout(function(){ canvasToImage(that) },200) ) }}/** * 分享图片生成临时文件 */function canvasToImage(page){ if (page != null && page != '' && page != undefined) { var that = page; wx.canvasToTempFilePath({ x: 0, y: 0, fileType:'png', width: 380, height: 426, destWidth: 380 * 4, destHeight: 426 * 4, canvasId: 'myCanvas', success: function (res) { //展示窗口 that.setData({ showShareWindow: true, sharePicture: res.tempFilePath }) }, fail: function (err) { wx.showToast({ icon: 'none', title: '生成分享图片失败' }) } },that) }} |
在开发工具上表现出来的结果是正常的
但是用手机真机调试发现背景图没有画出来，同时fillText()的所有信息也没能写上
当我保存到手机上时，在相册中打开，发现 fillText() 的信息倒是写上了，但是还是没有背景图
三处表现不一，这怎么解决？
确实问题很多。
不仅是背景图和人物信息没有画上去，左上角有个头像也没画上去