小程序中canvas绘制网络图片

最新推荐文章于 2024-07-28 15:31:02 发布

卜卦丶cc

最新推荐文章于 2024-07-28 15:31:02 发布

阅读量3.8k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 canvas 网络图片

本文链接：https://blog.csdn.net/qq_37896578/article/details/80803487

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

小程序中canvas 绘制网络图片时先要将网络图片得路径保存在本地，再用本地生成的路径去绘制。

   1.一张图： 
 
   wx.getImageInfo({ 
  //保存网络图片 
 
   src: 
  'https://你的图片路径', 
 
   success: 
  function (res) { 
 
   //请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中  
  
   this.globalData. 
  pic = res.path; 
 
   } 
 
   })

2.多张图

    success: (res) => { //请求接口成功后 
  
   this.imgUrl = res.data.data; 
  
    app.globalData.imgUrl = 
   this.imgUrl; 
  
   for ( 
   let i = 
   0; i < 
   this.imgUrl.length; i++) { // 使用循环遍历出数组得数据 
  
   for ( 
   let e = 
   0; e < 
   this.imgUrl[i].length; e++) { 
  
    wx.getImageInfo({ 
   //保存网络图片 
  
    src: 
   "https://" + 
   this.imgUrl[i][e].url, 
   //请求的网络图片路径 
  
    success: 
   function (res) { 
  
   //请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中  
  
    app.globalData.imgUrl[i][e].localpic = res.path; 
  
   if (i == 
   2 && e == that.imgUrl[ 
   2].length- 
   1) { //数据量太大时做一个加载判断， 
  
    that.setData({ 
  
    show: 
   1 
  
    }) 
  
    } 
  
    }, 
  
    }) 
  
    } 
  
    } 
  
    },