这里写自定义目录标题
uniapp 或原生小程序中保存网络图片及保存base64位图片的方法
正常网络图片或本地图片可以使用 uni.downloadFile或者 uni.getImageInfo api进行处理,最后使用uni.saveImageToPhotosAlbum进行处理,
保存base64图片需要使用uni.getFileSystemManager().writeFile写入文件,成功后调用uni.saveImageToPhotosAlbum
使用getImageInfo
getImageInfo
data() {
return { imageUrl:'https://img0.baidu.com/it/u=3564324437,2903688591&fm=26&fmt=auto' }
},
methods: {
save() {
uni.getSetting({ //获取用户的当前设置
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum()
} else {
uni.authorize({//重新发起获取授权
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum()
},
fail: () => {
uni.showToast({
title: '请打开保存相册权限,再点击保存相册分享',
icon: 'none',
duration: 2000
})
let timer = setTimeout(() => {
clearTimeout(timer)
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: e => {}
})
}, 2000)
}
})
}
}
})
},
saveImageToPhotosAlbum(){
wx.getImageInfo({
src: this.imageUrl,
success: res=> {
wx.saveImageToPhotosAlbum({
filePath: res.path,
success(res) {
wx.showToast({ title: '保存图片成功!', })
},
fail(err) {
wx.showToast({ title: '保存图片失败!', })
}
})
},
fail: err => {
console.log(err,'err')
}
})
}
}
使用downloadFile
downloadFile
data() {
return { imageUrl:'https://img0.baidu.com/it/u=3564324437,2903688591&fm=26&fmt=auto' }
},
methods: {
save() {
uni.getSetting({ //获取用户的当前设置
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum()
} else {
uni.authorize({//重新发起获取授权
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum()
},
fail: () => {
uni.showToast({
title: '请打开保存相册权限,再点击保存相册分享',
icon: 'none',
duration: 2000
})
let timer = setTimeout(() => {
clearTimeout(timer)
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: e => {}
})
}, 2000)
}
})
}
}
})
},
saveImageToPhotosAlbum(){
wx.downloadFile({
url: this.imageUrl,
success: res=> {
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({ title: '保存图片成功!', })
},
fail(res) {
wx.showToast({ title: '保存图片失败!', })
}
})
}
},
fail: err => {
console.log(err,'err')
}
})
}
}
使用uni.getFileSystemManager().writeFile保存base64
**注意:使用此方法要删除掉返回数据中含有的data:image/png;base64,时,data参数需要写成:imageUrl.slice(22)或者使用替换也可以,此外,在小程序中可能base64不显示的问题,在赋值之前使用 imageUrl.replace(/[\r\n]/g, '')**
getFileSystemManager().writeFile
methods: {
save() {
uni.getSetting({ //获取用户的当前设置
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum()
} else {
uni.authorize({//重新发起获取授权
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum()
},
fail: () => {
uni.showToast({
title: '请打开保存相册权限,再点击保存相册分享',
icon: 'none',
duration: 2000
})
let timer = setTimeout(() => {
clearTimeout(timer)
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: e => {}
})
}, 2000)
}
})
}
}
})
},
saveImageToPhotosAlbum(){
var imgSrc = this.imageUrl//base64编码
var number = Math.random()
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
data: imgSrc,
encoding: 'base64',
success: res => {
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
success: function (res) {
wx.showToast({ title: '保存成功', })
},
fail: function (err) {
console.log(err)
}
})
console.log(res)
}, fail: err => {
console.log(err)
}
})
}
}