小程序canvas使用网络图片真机不显示解决方案----可直接使用案例测试

图片都是线上的，可以直接放到onLoad里边自动检测

1.注意点：  在绘制网络图片时必需先将其保存到本地然后在绘制。当我们在加载一个带有图片的页面时，图片都会被暂存到本地，由此我们可以通过wx.gerImageInfo接口访问本地的暂存路径来调用drawImage方法绘制图片。如下：（注意网络图片的地址一定要在合法域名内）

      /*
       * author:咔咔
       * address:陕西西安
       * wechat:fangkangfk
       * */
      // 小程序二维码
           var path1 = 'https://www.weiuid.com/attachs/uploads/20180913/6386.png';
           const ctx = wx.createCanvasContext('myCanvas')
           // // 封面图
           var path = 'https://www.weiuid.com/attachs/uploads/20180912/d70711527c3ca66054f9989af7975d87.jpg';
            wx.getImageInfo({
              src: path,//服务器返回的图片地址
              success: function (res) {
               //res.path是网络图片的本地地址
                let Path = res.path;
                ctx.drawImage(Path, 0, 0, 400, 200)
              },
              fail: function (res) {
               //失败回调
              }
            });
           var that = this;
           //获取网络图片本地路径
            wx.getImageInfo({
              src: path1,//服务器返回的图片地址
              success: function (res) {
               //res.path是网络图片的本地地址
                let Path = res.path;
                ctx.drawImage(Path, 140, 300, 100, 100)
                ctx.draw(false, function () {
                  wx.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    success: function (res) {
                      console.log(res.tempFilePath)
                      wx.previewImage({
                        urls: [res.tempFilePath] // 需要预览的图片http链接列表
                      })
                    }
                  })
                });
              },
              fail: function (res) {
               //失败回调
              }
            });
  
 

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/82711830