收藏
回答

canvas 图片显示不出来

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 6.7.2 2.2.2

canvas 的图为啥显示不了 base64的显示不出来

let promiseImg = new Promise(function (resolve, reject) {

wx.getImageInfo({

src: cover,

success: function (cover) {

resolve(cover.path)

console.log(cover)

}

})

})

promiseImg.then(function (cover) {

that.setData({

cover:cover

})

ctx.drawImage(cover, 0, 0, 320, 170);

})

getImageInfo返回本地的路径也显示不到canvas上如果吧路径放到img上就能显示


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

2 个回答

  • 雨中的鱼
    雨中的鱼
    2018-09-06

    let that = this;

       console.log(that.data.imgPath)

       const ctx = wx.createCanvasContext('myCanvas');

       ctx.drawImage(that.data.imgPath, 0, 0, 150, 150);

       ctx.draw(true, function () {

         wx.canvasToTempFilePath({

           x: 0,

           y: 0,

           width: 150,

           height: 150,

           destWidth: 150,

           destHeight: 150,

           canvasId: 'myCanvas',

           success: function (res) {

             console.log(res.tempFilePath)

             wx.saveImageToPhotosAlbum({

               filePath: res.tempFilePath,

               success(res) {

                 console.log(res)

               }, fail(res) {

                 console.log(res)

               }

             })

           }, fail(res) {

             console.log('canvasToTempFilePath', res)

           }

         })


       });


    我也是遇到同样的问题,开发工具能显示图片,保存图片,到真机就不能显示图片到画布上面了,that.data.imgPath  是图片base64内容, 要是正常图片路径就可以显示,base64真机显示不了到画布,  我的手机机型是 小米6,微信版本6.7.2


    2018-09-06
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-09-06

    缺个draw(),在html的canvas里画图只要drawImage就行了,但是小程序的要加上draw(),官方文档截图:


    2018-09-06
    有用
    回复 4
    • 蒙檍
      蒙檍
      2018-10-08

      没用

      2018-10-08
      回复
    • 卢霄霄
      卢霄霄
      2018-10-08回复蒙檍

      如果是本地图片,可以直接画。如果是网络图片,需要downloadFile了之后画(download需要加白名单)。如果是base64,暂时只能转成本地图片了画。如果你不存在以上的情况,贴下你代码呢?

      2018-10-08
      回复
    • 蒙檍
      蒙檍
      2018-10-08回复卢霄霄

      就是base64图片canvas展示问题的具体解决办法

      2018-10-08
      回复
    • 卢霄霄
      卢霄霄
      2018-10-08回复蒙檍

      主要就是用 FileSystemManager.writeFile 把 base64转成本地文件呢。。不过没真试过。。反过来的倒是有不少人在用

      2018-10-08
      回复
登录 后发表内容