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

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

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

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

參考：小程序后臺設(shè)置域名

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。