微信小程序实现图片下载与保存功能

文章讲述了在微信小程序中实现全屏图片下载,通过定时器控制下载频率,获取并检查用户保存图片至相册的权限,确保授权流程后将图片保存到系统相册的过程。
摘要由CSDN通过智能技术生成

具体思路:

  1. 首先,定义了一个全局的定时器变量timer
  2. downloadImage函数中,如果timer已经存在,就清除它,以确保每次只有一个下载任务在进行。
  3. 然后,设置一个新的定时器,延迟1秒后开始执行下载任务。这是为了防止频繁触发下载操作。
  4. 在定时器的回调函数中,首先显示一个加载提示,然后开始下载图片。
  5. 图片的URL是从页面的data中获取的,保存在fullScreenImageUrl字段中。
  6. 使用wx.downloadFile函数下载图片,如果下载成功,就获取到图片的临时文件路径。
  7. 接下来,检查用户是否已经授权小程序保存图片到相册。如果没有授权,就请求授权。如果用户拒绝授权,就显示一个模态对话框,引导用户去设置中开启授权。
  8. 如果用户已经授权,或者在请求授权后用户同意授权,就调用saveImage函数,将图片保存到系统相册。
  9. 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
                });
            }
        });
    },
});
  • 10
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序实现保存图片功能的基本步骤如下: 1. 在小程序的页面中,首先需要引入 `wx.canvas` 用于绘制和保存图片。 2. 在页面中创建一个 `<canvas>` 标签,设置宽高和唯一的 `canvas-id`。 3. 在 `<canvas>` 中使用 `wx.createContext` 创建绘图上下文对象。 4. 使用绘图上下文对象的 `drawImage` 方法将图片绘制到 `<canvas>` 中。 5. 创建一个按钮或其他触发保存操作的交互元素,并在点击事件中编写保存图片的逻辑。 6. 在点击事件中,使用 `wx.canvasToTempFilePath` 方法将 `<canvas>` 中的内容保存为临时文件路径。 7. 使用 `wx.saveImageToPhotosAlbum` 方法将临时文件保存到用户相册中。 下面是一个实现保存图片功能的示例代码: ```javascript // 在页面中的 js 文件中 Page({ saveImage: function() { const ctx = wx.createCanvasContext('myCanvas', this); // 绘制图片到 canvas ctx.drawImage('/path/to/image.jpg', 0, 0, 300, 200); // 绘制完成后调用 draw 方法 ctx.draw(false, () => { // 将 canvas 中的内容保存为临时文件 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { // 保存临时文件到用户相册 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail: (err) => { console.error(err); } }); }, fail: (err) => { console.error(err); } }, this); }); } }); ``` 在上述代码中,点击 `saveImage` 按钮会执行保存图片的逻辑,将图片绘制到 `<canvas>` 中,然后将 `<canvas>` 中的内容保存为临时文件,并最终保存到用户的相册中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值