收藏
回答

drawImage,手机端预览,图片不显示

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug canvasContext.drawImage 客户端 Android 6.6.1.1220 1.9.2


图片地址是https

context.setFontSize(20)
 
context.fillText(name, width / 2 + 6, "50")
 
context.drawImage("https://dl1.loveq.cn/animated_favicon.gif", width / 2 - 64, 12, 50, 50)
 
 
wx.canvasToTempFilePath({
 
      x: 0,
 
      y: 0,
 
      width: width,
 
      height: height,
 
      destWidth: width,
 
      destHeight: height,
 
      canvasId: '1',
 
      success: function (res) {
 
        console.log(res.tempFilePath)
 
        wx.saveImageToPhotosAlbum({
 
          filePath: res.tempFilePath,
 
          success(res) {
 
            console.log(res)
 
          }
 
        })
 
      }




模拟器的界面正常,控制台都出现了地址,但是手机开发者版本预览,还是显示不了图片,是什么原因?







最后一次编辑于  2018-05-17
回答关注问题邀请回答
收藏

13 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-02-06

    canvasToTempFilePath需要在draw回调里调用

    2018-02-06
    有用
    回复
  • Naruto
    Naruto
    2018-03-21

    1. 先用wx.getImageInfo(),将网络图片转换成本地图片

    2. 用canvas中的drawImage去画图

    但是开发者工具和真机上都看不到图片,求问什么原因

    2018-03-21
    有用 1
    回复 1
    • 芳草天
      芳草天
      2019-04-13

      同样问题 层主解决了吗

      2019-04-13
      回复
  • 晴天
    晴天
    2018-02-05

    1.先用wx.getImageInfo(),将网络图片转换成本地图片

    2.用canvas中的drawImage去画图

    3.wx.canvasToTempFilePath()     将canvas画布转换成图片

    4.wx.saveImageToPhotoAlbum()    将图片保存到本地相册

    问题:页面刷新第一次进来,图片保存为空,再保存一次显示正常,然后重新刷新进入,仍旧存在上述问题

    求大神解决,谢谢啦

    2018-02-05
    有用 1
    回复 2
    • 嗯?
      嗯?
      2018-06-12

      这个我也遇到了 用setTimeout可以解决

      2018-06-12
      1
      回复
    • 🎏陈诗烁
      🎏陈诗烁
      2018-08-20

      setTimeout 可以解决。根本原因是什么

      2018-08-20
      回复
  • 多多
    多多
    2018-01-22

    getImageInfo,把网络图片转成本地路径,再放进drawImage

    2018-01-22
    有用 1
    回复
  • 福音戰士
    福音戰士
    2018-06-06

    如果图片是base64的,如何解决这个问题?

    2018-06-06
    有用
    回复
  • 卡拉肖克.龙💢
    卡拉肖克.龙💢
    2018-05-17

    同步下载多个图片


      

    downloadFile(url) {

        const that = this;

        return new Promise(function (resolve) {

          wx.downloadFile({

            url,

            success: function (downRes) {

              if (downRes.statusCode === 200) {

                wx.getImageInfo({

                  src: downRes.tempFilePath,

                  success: function (info) {

                    resolve({ info, url: downRes.tempFilePath });

                  }

                });

              }

            }

          });

        });

      },




      downloadFileList(list) {

        const that = this;

        let pList = [];

        for (let i = 0; i < list.length; i++) {

          pList[i] = that.downloadFile(list[i]);

        }

        return Promise.all(pList);

      },



    that.downloadFileList(imgList).then(urlList => {

        //...todo...

    });



    2018-05-17
    有用
    回复
  • 多多
    多多
    2018-01-24

    回复8楼,这种做法是异步,如果出现多幅图片我也暂时没想到办法,循环执行getImageInfo会有问题,图片顺序错乱,你有更好办法,可以这里留言下

    2018-01-24
    有用
    回复
  • 趁你还年轻
    趁你还年轻
    2018-01-24


    昨晚终于找到一个方案。

    用downloadFile或者getImageInfo去拿在线图片,绘制一张是没问题的。

    但是如果想绘制多张怎么办?遍历下载图片源并绘制。(注意这里需要用到闭包)


    一开始我尝试用异步转换同步的方式去控制,发现实现方式有些复杂,而且小程序不支持generator,最后选择了立即函数闭包的方式去实现。

                  var canvasImage = '';
                  var picx = 0;
                  var picy = 0;
                  var picwidth = 0;
                  var picheight = 0;
                  var j = 0;
                  for (var i = 0; i < photoData.length;i++){
                    (function(j){
                      getImageInfoPromisified({
                        src: photoData[j].url

                      }).then(function (res) {

                         canvasImage = res.path

                          picx = photoData[j].left / 2;
                          picy = (photoData[j].top - 400) / 2;
                          picwidth = photoData[j].width / 2;
                          picheight = photoData[j].height / 2;
     
                          ctx.drawImage(canvasImage, picx, picy, picwidth, picheight);
                          ctx.draw(true)
                          
                         
                      }).catch(function () {
                        console.error("get location failed")
                      })
                    })(i)
                  }




    2018-01-24
    有用
    回复 1
    • 嗯?
      嗯?
      2018-06-12

      你这个比getImageInfo要复杂很多 ,差评一个

      2018-06-12
      回复
  • Christian~可航
    Christian~可航
    2018-01-24

    getImageInfo,把网络图片转成本地路径,再放进drawImage和后续的绘图,这个方法很好用!

    2018-01-24
    有用
    回复
  • 趁你还年轻
    趁你还年轻
    2018-01-24

    我尝试用wx.downloadFile()这个接口保存到本地,但是因为它是异步的,如果能提供一个同步的方法就好了

    2018-01-24
    有用
    回复

正在加载...

登录 后发表内容