微信小程序保存图片到相册；uni-app小程序保存网络图片到相册；小程序保存图片到相册拒绝授权后重新拉起授权；保存图片到系统相册；小程序保存图片测试可以，真机保存图片失败

文末代码可以直接复制使用，图片修改成你的图片路径即可

一、场景： 小程序点击按钮，保存项目内的静态图片或者微信头像或者后端返回的图片；

二、注意点及思路拆分：
–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小程序保存网络图片到相册；小程序保存图片到相册拒绝授权后重新拉起授权；保存图片到系统相册；小程序保存图片测试可以，真机保存图片失败相关推荐

微信小程序保存图片到相册授权被拒绝后重新拉取授权的方法
近期开发过小程序的童鞋应该已经知道,小程序某些接口已废弃,改用新的接口. 比如wx.getUserInfo().wx.authorize().wx.openSetting()等都将废弃,拉起不了用户授 ...
微信分享自定义标题和图片,开发者工具没问题,真机调试失败
昨天亲身经历,微信分享开发者工具调试没问题,但是真机调试失败,说明配置是没问题的,历经一天发现是缓存的问题解决方案: 删除掉微信进程后,缓存没有被彻底清除安卓手机打开 debugtbs.qq.co ...
Xcode 真机调试失败：Errors were encountered while preparing your device for development
Xcode 真机调试失败今天和往常一样启动xcode,选择真机调试,结果弹出以下提示框: Errors were encountered while preparing your device fo ...
uni-app [真机运行失败,失败原因:手机上没有信任本计算机的授权,请在手机上信任该授权]
在hbuilder上连接手机运行uni-app项目时,出现了这样的问题:[真机运行失败,失败原因:手机上没有信任本计算机的授权,请在手机上信任该授权],本人用得Android荣耀手机,大家可以根据以下 ...
解决微信小程序MQTT通讯真机调试失败的问题附加可用代码
原因:模拟器上测试可以,选中了不校验合法域名,真机调试没能连接服务器,解决思路换了个mqtt.js 可参考 https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js ...
微信小程序，保存图片到相册授权被拒绝后重新拉取授权wx.opensetting的使用方法
当第一次的时候使用wx.getSetting的时候会发现没有scope.writePhotosAlbum这个对象,所以并不知道是否授权在这里插入图片描述 <view class="u ...
解决小程序图片在开发者工具能显示，测试时真机不显示问题
最近经管院的三个小伙伴邀请我参加绿创的创业项目,我负责给设计的产品写一个简单的微信小程序.发版后出现了一个奇怪的问题,页面的图片在开发者工具中明明是可以显示的,但到了真机测试时有的图片却不见了,检查过 ...
小米4s真机测试运行失败
场景 AndroidStudio用小米4s真机测试.点运行,程序装失败: 分析 MIUI自身优化所致. 解决设置->更多设置->开发者选项关启动MIUI优化选项并重启手机: 连接测试, ...
dcloud如何苹果ios系统真机测试-HBuilderX真机运行ios测试
dcloud如何运行到IOS真机测试 1,下载安装iTunes 安装完毕后重新打开HBuilderX 2,点击运行真机将iPhone 与电脑进行链接,点信任, 运行-运行到手机或模拟器-运行到IOS ...

微信小程序保存图片到相册；uni-app小程序保存网络图片到相册；小程序保存图片到相册拒绝授权后重新拉起授权；保存图片到系统相册；小程序保存图片测试可以，真机保存图片失败

直接复制拿去使用即可！有效就点赞收藏一波吧！

微信小程序保存图片到相册；uni-app小程序保存网络图片到相册；小程序保存图片到相册拒绝授权后重新拉起授权；保存图片到系统相册；小程序保存图片测试可以，真机保存图片失败相关推荐

最新文章

热门文章