收藏
回答

画布在开发工具上绘画正常,在真机调试里画的不对怎么回事?


/**
 * 绘制分享图片
 */
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() 的信息倒是写上了,但是还是没有背景图


三处表现不一,这怎么解决?


回答关注问题邀请回答
收藏

2 个回答

  •  兼
     兼
    2019-01-28

    确实问题很多。

    2019-01-28
    赞同
    回复
  • Promise
    Promise
    2019-01-08

    不仅是背景图和人物信息没有画上去,左上角有个头像也没画上去

    2019-01-08
    赞同
    回复
登录 后发表内容