用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

:在微信小程序中下載圖片到本地解決方案

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-16 00:37

說明最近有些空余時間開始著手優化我那個吉他自學小助手的微信小程序,其中有一個功能是下載吉他譜到本地,開始以為只是很簡單的拿到圖片url然后down下來就好了,其實不然…最終通過google解決了這個問題,現在記錄 ...

說明

最近有些空余時間開始著手優化我那個 吉他自學小助手 的微信巴黎彩票计划,其中有一個功能是下載吉他譜到本地,開始以為只是很簡單的拿到圖片url然后down下來就好了,其實不然…最終通過google解決了這個問題,現在記錄一下,以便后續翻閱。

少廢話先看東西

流程梳理

獲取圖片遠程地址數組–>遍歷拿到圖片緩存(臨時地址)(wx.getImageInfo)–>保存緩存圖片到本地(wx.saveImageToPhotosAlbum)

完整代碼

子組件代碼邏輯

//子組件download-file.vue
<template>
  <div></div>
</template>

<script>
export default {
  props: {
    urls: {
      default: ""//通過父組件傳遞遠程圖片路徑數組
    }
  },
  watch: {
    urls() {
      if (this.urls.length > 0) {
        this.downLoadImage(this.urls);//監聽變化
      }
    }
  },
  methods: {
  	//拿到圖片的臨時路徑
    getImageInfo(url) {
      var cache = {};
      return new Promise((resolve, reject) => {
        /* 獲得要在畫布上繪制的圖片 */
        if (cache[url]) {
          resolve(cache[url]);
        } else {
          const objExp = new RegExp(
            /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
          );
          if (objExp.test(url)) {
            wx.getImageInfo({
              src: url,
              complete: res => {
                if (res.errMsg === "getImageInfo:ok") {
                  cache[url] = res.path;
                  resolve(res.path);
                } else {
                  reject(new Error("getImageInfo fail"));
                }
              }
            });
          } else {
            this.cache[url] = url;
            resolve(url);
          }
        }
      });
    },
    downLoadImage(urls) {
      const vm = this;
      let temp = [];
      if (urls.length > 0) {
        urls.map((item, index) => {
          vm.getImageInfo(item).then(res => {
            temp.push(res);
            vm.saveImageToLocal(res);
          });
        });
      }
    },
    saveImageToLocal(path) {
      //保存臨時圖片到本地
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success(res) {
          console.log("success");
        },
        fail: function(res) {
          console.log(res);
        }
      });
    }
  }
};
</script>

<style>
</style>

在父組件中引用

//news/detail.vue
//省略代碼...
<button @click="download">下載</button>
//省略代碼...
<download-file :urls="downLoadUrls" ref="myDownload"></download-file>
//省略代碼...
async download() {
    let vm = this;
    const temp = [];
    let data = await vm.$net.get(vm.$apis.articleDetails, {
        id: vm.item.id
    });
    if (data.article.body.length > 0) {
      data.article.body.map((item, index) => {
        if (item.type == "img") {
          temp.push(item.data);
        }
    });
  }
  vm.downLoadUrls = temp;
},
分享至 : QQ空間
收藏
原作者: 推酷 來自: 推酷
nba体彩 手机软件七星彩票app 欢乐二人雀神好友房 双色球历史开奖数据下载 二八杠口诀赌博的技巧 pc蛋蛋稳赚不赔全包压法 竞彩足球比分直播现场 导师带快3是不是圈套 黑龙江时时乐乐 夺宝阁时时彩计划软件手机版 pk10技巧稳赚五码论坛 比分网 11选5哪个计划软件好用 一码独胆技巧pk10 单点登录软件 北京pk10赛车预测软件