小程序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