收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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))
   },


最后一次编辑于  08-01  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

5 个回答

  • Why not?
    Why not?
    08-01

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


    08-01
    赞同 11
    回复 3
    • Itachi
      Itachi
      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)

      },


      08-01
      赞同
      回复
    • Itachi
      Itachi
      08-01回复Itachi

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

      08-01
      赞同
      回复
    • Why not?
      Why not?
      08-01
      两张图片先下载,都下载完了再画。如果你不需要图片信息,用wx.downloadFile下载也可以
      08-01
      赞同
      回复
  • ~_~
    ~_~
    08-01

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

    08-01
    赞同
    回复