明霞山资源网 Design By www.htccd.com
说明
最近有些空余时间开始着手优化我那个吉他自学小助手的微信小程序,其中有一个功能是下载吉他谱到本地,开始以为只是很简单的拿到图片url然后down下来就好了,其实不然...最终通过google解决了这个问题,现在记录一下,以便后续翻阅。
少废话先看东西
演示.gif
流程梳理
获取图片远程地址数组-->遍历拿到图片缓存(临时地址)(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)"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; },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
mpvue小程序下载远程图片
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?