收藏
回答

canvas图片在真机上不显示?


圈起来部分在真机上不显示  代码如下:

let ctx = wx.createCanvasContext('customCanvas')

let text = res.goods_list[0].goods_name

let textTeam = res.team_name

ctx.beginPath()

ctx.setFillStyle('#000')

ctx.setFontSize(16)


// 中间文字

that.dealWords({

//画布上下文

ctx: ctx,

//字体大小

fontSize: 22,

//需要处理的文字

word: text,

//一行文字最大宽度

maxWidth: 290,

//文字在x轴要显示的位置

x: 50,

//文字在y轴要显示的位置

y: 110,

//文字最多显示的行数

maxLine: 1

})

// 底部图片圆

let x =50;

for(let  i =0;i<3;i++){

console.log(res.goods_list[i].goods_pic,i)

if(i==0){

ctx.drawImage(res.goods_list[i].goods_pic,x, 170, 80, 80);

}else{

ctx.drawImage(res.goods_list[i].goods_pic, x += 100, 170, 80, 80);

}

}


// 底部文字

ctx.setFillStyle('gray')

that.dealWords({

ctx: ctx,

fontSize: 16,

word: textTeam,

maxWidth: 230,

x: 50,

y: 136,

maxLine: 2

})

// 通过回调把canvas画布生成图片

ctx.draw(false, () => {

setTimeout(() => {

wx.canvasToTempFilePath({

canvasId: 'customCanvas',

success: (res) => {

let thatsz = thats1

console.log(res.tempFilePath)

wx.saveFile({

//把文件保存到本地

tempFilePath: res.tempFilePath,

success: function (resl) {

console.log(resl.savedFilePath)

thatsz.setData({

picUrl: resl.savedFilePath

});

}

})

}

}, that);

}, 300); //此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题

});


最后一次编辑于  07-10  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 福
    07-10

    先把图片down下来,做成二进制数据,然后画

    07-10
    赞同
    回复 8
    • Sun in June
      Sun in June
      07-10

      大佬 能提供下那部分代码嘛?

      07-10
      回复
    • 福
      07-10回复Sun in June

      你图片保存本地,使用wx.downloadFile 保存下来


      07-10
      回复
    • 福
      07-10回复

      如果图片不是本地数据,会有bug的。模拟机上canvas是一个假的div,真机上才是真的原生组件

      07-10
      1
      回复
    • Sun in June
      Sun in June
      07-10回复

      好的 。 谢谢大佬

      07-10
      回复
    • Sun in June
      Sun in June
      07-10回复

      let x = 50;

      for (let i = 0; i < 3; i++) {

      wx.downloadFile({

      url: res.goods_list[i].goods_pic,

      success: function (res) {

      console.log(res.tempFilePath)


      if (i == 0) {

      ctx.drawImage(res.tempFilePath, x, 170, 80, 80);

      } else {

      ctx.drawImage(res.tempFilePath, x += 100, 170, 80, 80);

      }

      }

      })

      }

      这样写模拟器上也出不来了- - 什么情况呀 还是我写的不对呢?

      07-10
      回复
    查看更多(3)