微信小程序实现图片下载与保存功能
2023-12-15 14:53:26
具体思路:
- 首先,定义了一个全局的定时器变量
timer
。 - 在
downloadImage
函数中,如果timer
已经存在,就清除它,以确保每次只有一个下载任务在进行。 - 然后,设置一个新的定时器,延迟1秒后开始执行下载任务。这是为了防止频繁触发下载操作。
- 在定时器的回调函数中,首先显示一个加载提示,然后开始下载图片。
- 图片的URL是从页面的
data
中获取的,保存在fullScreenImageUrl
字段中。 - 使用
wx.downloadFile
函数下载图片,如果下载成功,就获取到图片的临时文件路径。 - 接下来,检查用户是否已经授权小程序保存图片到相册。如果没有授权,就请求授权。如果用户拒绝授权,就显示一个模态对话框,引导用户去设置中开启授权。
- 如果用户已经授权,或者在请求授权后用户同意授权,就调用
saveImage
函数,将图片保存到系统相册。 - 在
saveImage
函数中,使用wx.saveImageToPhotosAlbum
函数将图片保存到系统相册。如果保存成功,就显示一个成功提示;如果保存失败,就显示一个失败提示。
完整代码:
let timer; // 定义一个定时器
Page({
data: {
fullScreenImageUrl: "", // 下载图片的URL
},
downloadImage() {
let that = this;
// 清除上一次的定时器
if (timer) {
clearTimeout(timer);
}
// 设置新的定时器
timer = setTimeout(function() {
// 显示加载提示
wx.showToast({
title: '下载中...',
icon: 'loading'
});
let link = that.data.fullScreenImageUrl; // 获取图片URL
// 下载文件
wx.downloadFile({
url: link,
success(res) {
if (res.statusCode === 200) {
const filePath = res.tempFilePath; // 获取图片临时文件路径
// 检查权限
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
// 请求授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveImage(filePath); // 保存图片
},
fail() {
// 引导用户开启授权
wx.showModal({
title: '提示',
content: '您已拒绝我们保存图片到相册,您可以在设置中开启',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
console.log(res.authSetting)
}
})
}
}
})
}
})
} else {
that.saveImage(filePath); // 保存图片
}
}
});
}
},
fail() {
wx.showToast({ // 添加失败提示框
title: '下载失败',
icon: 'none',
duration: 2000
});
}
});
}, 1000); // 1000 毫秒的延迟
},
// 保存图片
saveImage(filePath) {
// 保存图片到系统相册
wx.saveImageToPhotosAlbum({
filePath: filePath,
success(res) {
wx.showToast({ // 添加成功提示框
title: '保存图片成功',
icon: 'success',
duration: 2000
});
},
fail() {
wx.showToast({ // 添加失败提示框
title: '保存图片失败',
icon: 'none',
duration: 2000
});
}
});
},
});
文章来源:https://blog.csdn.net/m0_61396811/article/details/135015502
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!