首页 小程序 微信小程序实现将图片保存到手机相册

微信小程序实现将图片保存到手机相册

前言

图片保存到手机相册的功能相信大家一定都用过吧,今天教你用微信小程序实现这个好玩的小功能。

实现效果如下:

在这里插入图片描述

实现思路:

首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用wx.saveImageToPhotosAlbum方法保存图片到系统相册,需要注意的是这样写很可能会因为没有权限而导致下载不了图片,所以我们最后还需要给接口一个调用失败的回调函数,以此来获取权限,最后这个小功能就实现啦。

源码如下:

wxml文件

<!-- 按钮触发事件 --><button bindtap="downloadImg">点击下载图片</button>
  • 1
  • 2

js文件

const app = getApp(); //获取app实例Page({    data: {        modalType: false, //弹框默认不显示        imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片    },    // 点击下载图片事件    downloadImg() {        wx.showLoading({            title: '加载中...'        });        //wx.downloadFile方法:下载文件资源到本地        wx.downloadFile({            url: this.data.imgUrl, //图片地址            success: function (res) {                //wx.saveImageToPhotosAlbum方法:保存图片到系统相册                wx.saveImageToPhotosAlbum({                    filePath: res.tempFilePath, //图片文件路径                    success: function (data) {                        wx.hideLoading(); //隐藏 loading 提示框                        wx.showModal({                            title: '提示',                            content: '保存成功',                            modalType: false,                        })                    },                    // 接口调用失败的回调函数                    fail: function (err) {                        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {                            wx.showModal({                                title: '提示',                                content: '需要您授权保存相册',                                modalType: false,                                success: modalSuccess => {                                    wx.openSetting({                                        success(settingdata) {                                            console.log("settingdata", settingdata)                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {                                                wx.showModal({                                                    title: '提示',                                                    content: '获取权限成功,再次点击图片即可保存',                                                    modalType: false,                                                })                                            } else {                                                wx.showModal({                                                    title: '提示',                                                    content: '获取权限失败,将无法保存到相册哦~',                                                    modalType: false,                                                })                                            }                                        },                                        fail(failData) {                                            console.log("failData", failData)                                        },                                        complete(finishData) {                                            console.log("finishData", finishData)                                        }                                    })                                }                            })                        }                    },                    complete(res) {                        wx.hideLoading(); //隐藏 loading 提示框                    }                })            }        })    }})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。