drawImage，手机端预览，图片不显示
发布于 6 年前 作者 min28 18944 次浏览 来自 问答

图片地址是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)
 
          }
 
        })
 
      }

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

10 回复

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

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

同步下载多个图片

 

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…

});

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

2.用canvas中的drawImage去画图

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

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

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

求大神解决，谢谢啦

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

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

  2. 用canvas中的drawImage去画图

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

如果图片是base64的，如何解决这个问题？

昨晚终于找到一个方案。

用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)
              }


canvasToTempFilePath需要在draw回调里调用

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

回到顶部