收藏
回答

wx.getImageInfo不能将图片画在画布上

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.createCanvasContext.drawImage() 工具 7.0.5 1.0.2

看了很多帖子,不能直接把网络图片画到画布上,需要用wx.getImageInfo()将网络图片放在缓存里再画,可是还是不行啊

drawImg () {
     var _this = this
     const path1 = this.pageBg
     const path2 = this.QRCode
     const ctx = wx.createCanvasContext('shareCanvas')
     const QRSize = 120
     wx.getImageInfo({
       src: path1,
       success: function (res) {
         ctx.drawImage(res.path, 0, 0, 345, 588)
       }
     })
     wx.getImageInfo({
       src: path2,
       success: function (res) {
         ctx.drawImage(res.path, (345 - QRSize) / 2, 400, QRSize, QRSize)
       }
     })
     ctx.draw(true, setTimeout(() => {
       wx.canvasToTempFilePath({
         x: 0,
         y: 0,
         width: 345,
         height: 588,
         destWidth: 345,
         destHeight: 588,
         canvasId: 'shareCanvas',
         success: function (res) {
           console.log(res.tempFilePath)
           _this.finalImgUrl = res.tempFilePath
         },
         fail: res => {
           console.log(res)
         }
       })
     }, 2000))
   },


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

4 个回答

  • Why not?
    Why not?
    2019-08-01

    draw很可能比getImageInfo.success先执行,怎么画得出来


    2019-08-01
    有用 1
    回复 3
    • 🍄
      🍄
      2019-08-01

      drawImg () {

      var _this = this

      const ctx = wx.createCanvasContext('shareCanvas')

      const QRSize = 120

      wx.getImageInfo({

      src: _this.pageBg,

      success: function (res) {

      console.log(res.path)

      ctx.drawImage(res.path, 0, 0, 345, 588)

      }

      })

      wx.getImageInfo({

      src: _this.QRCode,

      success: function (res) {

      console.log(res.path)

      ctx.drawImage(res.path, (345 - QRSize) / 2, 400, QRSize, QRSize)

      }

      })

      setTimeout(() => {

      ctx.draw()

      }, 2000)

      },


      2019-08-01
      回复
    • 🍄
      🍄
      2019-08-01回复🍄

      因为要画两张图片,所以很头疼,请帮忙看看

      2019-08-01
      回复
    • Why not?
      Why not?
      2019-08-01
      两张图片先下载,都下载完了再画。如果你不需要图片信息,用wx.downloadFile下载也可以
      2019-08-01
      回复
  • 麦盟(Maimob)
    麦盟(Maimob)
    2020-08-19

    楼主 解决了么 我现在网络图片方本地用临时路径 也不显示图片

    2020-08-19
    有用
    回复
  • demon
    demon
    2019-09-05


    2019-09-05
    有用
    回复 2
    • demon
      demon
      2019-09-05
      上传到体验版本也不执行,我试过了,getimageinfo这个方法 嵌套使用的时候就不执行了
      2019-09-05
      回复
    • demon
      demon
      2019-09-05
      想知道怎么下载多张图片之后 在调用绘制画布的方法
      2019-09-05
      回复
  • 原点的原点
    原点的原点
    2019-08-01

    将网络图片放到本地,用临时路径

    2019-08-01
    有用
    回复
登录 后发表内容