WXOPEN Club

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

发布于 7 年前作者 min2819151 次浏览最后编辑 7 年前来自 ask

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

WXOPEN Club 内容图片 WXOPEN Club 内容图片

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

10 回复
xiadai
xiadai1 楼6 年前

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

xiaqiang
xiaqiang2 楼6 年前

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

xiawen
xiawen3 楼6 年前

同步下载多个图片

 

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…

});

vhu
vhu4 楼6 年前

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

2.用canvas中的drawImage去画图

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

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

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

求大神解决，谢谢啦

weitan
weitan5 楼6 年前

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

weilong
weilong6 楼6 年前
WXOPEN Club 内容图片

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

  2. 用canvas中的drawImage去画图

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

lei14
lei147 楼6 年前

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

fdong
fdong8 楼6 年前

昨晚终于找到一个方案。

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


lilong
lilong9 楼6 年前

canvasToTempFilePath需要在draw回调里调用

jing37
jing3710 楼5 年前

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