文末代碼可以直接復制使用，圖片修改成你的圖片路徑即可

一、場景： 小程序點擊按鈕，保存項目內的靜態圖片或者微信頭像或者后端返回的圖片；

二、注意點及思路拆分：
–2.1：小程序保存圖片功能，必須要有scope.writePhotosAlbum保存圖片到相冊的授權權限才可以
–授權會有拒絕時候，拒絕授權后如何再次重新拉起授權，以下代碼直接寫了
.
–2.2：保存圖片到系統相冊，圖片文件路徑，可以是臨時文件路徑也可以是永久文件路徑，不支持網絡圖片路徑（和項目內的相對圖片路徑）
.
–2.3：針對上述的2.2不支持的圖片，我們需要使用uni.getImageInfo()獲取其圖片的臨時文件路徑進行保存；
– uni.getImageInfo()支持獲取src為相對路徑、臨時文件路徑、存儲文件路徑和網絡圖片路徑的圖片，以此獲得此圖片的圖片信息（就包含此圖片的臨時路徑）
.
–2.4：小程序下獲取網絡圖片信息需先配置download域名白名單才能生效（文后有如何配置白名單），否則獲取會報錯getImageInfo:fail download image fail. reason: downloadFile:fail createDownloadTask:fail url not in domain list

–這一點非常重要：網絡圖片如果不配置download域名白名單，可能就導致你測試掃碼或真機測試和小程序工具上都沒問題，但是真正線上生產環境的卻報錯。

參考：小程序后臺設置域名

三、以下保存圖片代碼可直接復制，只需要將第12行的 localImg 圖片路徑改成你的圖片路徑即可（前提：如果是網絡圖片，一定要配置下載域名白名單）

直接復制拿去使用即可！有效就點贊收藏一波吧！

<template><view><img :src="localImg" alt=""><button @click="checkPermissions">點擊保存圖片到相冊</button></view> </template><script> export default {data () {return {localImg: '../static/iconimg/big.png',//這個是項目內的相對路徑圖片 如果是微信頭像需要設置域名白名單}},methods: {// 檢查是否有權限checkPermissions () {let that = this// 獲取用戶是否開啟 授權保存圖片到相冊。uni.getSetting({success (res) {// console.log('已知權限',res)// 如果沒有授權if (!res.authSetting['scope.writePhotosAlbum']) {// 則拉起授權窗口uni.authorize({scope: 'scope.writePhotosAlbum',success () {//點擊允許后--就一直會進入成功授權的回調 就可以使用獲取的方法了that.saveImg()},fail (error) {//點擊了拒絕授權后--就一直會進入失敗回調函數--此時就可以在這里重新拉起授權窗口console.log('拒絕授權則拉起彈框', error)uni.showModal({title: '提示',content: '若點擊不授權，將無法保存圖片',cancelText: '不授權',cancelColor: '#999',confirmText: '授權',confirmColor: '#f94218',success (res) {console.log(res)if (res.confirm) {// 選擇彈框內授權uni.openSetting({success (res) {console.log(res.authSetting)}})} else if (res.cancel) {// 選擇彈框內 不授權console.log('用戶點擊不授權')}}})}})} else {// 有權限--直接保存console.log('有權限 直接調用相應方法')that.saveImg()}},fail: (error) => {console.log('調用微信的查取權限接口失敗，并不知道有無權限!只有success調用成功才只知道有無權限', error)uni.showToast({title: error.errMsg,icon: 'none',duration: 1500,})}})},saveImg () {let that = thisuni.showLoading({ title: '加載中...', mask: true })// 獲取圖片信息--可以拿到圖片的臨時地址（保存時候用的是臨時地址）uni.getImageInfo({src: that.localImg,//小程序下獲取網絡圖片信息需先配置download域名白名單才能生效。例如微信頭像的保存就是網絡圖片，需要在小程序后臺配置下載域名// 想要知道這個網絡圖片的域名 可以通過小程序模擬器-詳情-本地設置-取消勾選（不校驗合法域名、web-view.......證書） 控制臺就會打印提示域名配置success: image => {// 獲取圖片臨時地址成功let img_local_now = image.path// 真正保存圖片方法 -- 保存圖片的文件路徑，可以是臨時文件路徑也可以是永久文件路徑，不支持網絡圖片路徑（也不支持本地代碼里的相對圖片路徑）uni.saveImageToPhotosAlbum({filePath: img_local_now,success: function () {uni.hideLoading()uni.showToast({icon: 'none',position: 'bottom',title: "已保存到系統相冊",duration: 1500,})},fail: error => {uni.hideLoading()console.log("保存圖片失敗", error)uni.showToast({title: error.errMsg,icon: 'none',mask: true,})}})},fail: error => {uni.hideLoading()console.log("獲取圖片信息(臨時地址)失敗", error)uni.showToast({title: error.errMsg,icon: 'none',mask: true,})}})}}, } </script><style> </style>

總結

以上是生活随笔為你收集整理的微信小程序保存图片到相册；uni-app小程序保存网络图片到相册；小程序保存图片到相册拒绝授权后重新拉起授权；保存图片到系统相册；小程序保存图片测试可以，真机保存图片失败的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。