uniapp保存图片_Uniapp实现保存图片到相册(封装起来)
我封裝了一個方法，之后可以直接使用
在此之前，先用class封裝一個Toast提示框
class Toast{
constructor(title,icon="success",duration=1300,mask=true) {
this.title = title
this.icon = icon
this.duration = duration
this.mask = mask
}
// 消息提示框:自動消失
showtoast(){
uni.showToast({
title: this.title,
icon:this.icon,
duration: this.duration,
mask:this.mask
});
}
// 消息提示框，手動消失
showloading(){
uni.showLoading({
title: this.title,
mask:true
});
}
// 輕提示
}
export default Toast
然后就開始封裝我們的downloadImg.js了
import toast from './toast.js'
export default function downloadImg(url){
uni.showLoading({
title: '正在下載',
mask: true
})
console.log(url)
let that = this;
uni.getImageInfo({
src: url,
success(res) {
console.log(res.path)
uni.saveImageToPhotosAlbum({
filePath: res.path,
success(res) {
new toast("已保存至相冊").showtoast()
},
fail(err) {
console.log(err);
uni.hideLoading();
uni.showModal({
title: '保存圖片至相冊',
content: '需要獲取您的相冊權限，請確認授權',
success: function(res) {
if (res.cancel) {
uni.showToast({
title: '獲取相冊權限失敗',
icon: 'none',
duration: 2000
})
} else if (res.confirm) {
uni.showLoading({
title: '打開設置',
mask: true
})
uni.openSetting({
success: function(data) {
uni.hideLoading();
new toast("請重新點擊下載原圖").showloading()
}
})
}
}
})
}
})
},
fail(err) {
console.log(err);
new toast("下載失敗,請重試").showloading()
}
})
}
然后最好把它掛載到原型上面,這樣就能全局使用了
import previewLogic from './public/previewImg.js'
Vue.prototype.$previewLogic = previewLogic
之后項目中如何使用呢？
previewImg(index,imgArray){
new this.$previewLogic(index, imgArray).previewImg()
}
index就是圖片的下標
imgArray是包含圖片的數組。例如:[‘圖片1’,‘圖片2’…]
previewImg，index，imgArray是自定義的，不是標準
總結
以上是生活随笔為你收集整理的uniapp保存图片_Uniapp实现保存图片到相册(封装起来)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python文件读写库_【8】pytho
- 下一篇： centos6 lnmp安装mysql_