微信小程序实现图片下载与保存功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现图片下载与保存功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

具体思路：

首先，定义了一个全局的定时器变量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://www.toymoban.com/news/detail-777465.html

到了这里，关于微信小程序实现图片下载与保存功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！