项目中需要保存带有水印的图片到本地相册。
现在图片上的水印是我拿到二维码定位到图片上做展示效果,所以真正带水印的图片是要在点击保存的时候从后台获取当前展示的图片的带水印图片,现在这是一个不自己切换的轮播图效果。
在点击保存时候:
在js中绑定保存到手机的点击事件:
saveToPhone() {
let centerItem = this.data.centerItem
let imageId = ``
let that = this
let info = this.data.imgUrls.find((item, index) => {
console.log(index)
return index == centerItem
})
console.log(info)
imageId = info.imageId
//后台获取带水印的图片
api._get(`api/v1/junchi/operations/promotion/getWaterMarkImage`, {
access_token: this.data.access_token,
imageId
}).then(data => {
console.log(data)
if (data.code == 0) {
//获取相册授权
let imgSrc = data.data.imageUrl //要保存的图片url
console.log(imgSrc)
wx.showLoading({
title: '保存中...'
})
wx.downloadFile({ //下载文件资源到本地
url: imgSrc,
success: function(res) {
console.log(res);
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(data) {
console.log(data)
wx.hideLoading()
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: function(err) {
console.log(err);
// $yjpToast.show({
// text: `保存失败`
// })
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
console.log("当初用户拒绝,再次发起授权")
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败,将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
},
complete(res) {
console.log(res);
wx.hideLoading()
}
})
}
})
}
})
}
因为后台获取到的图片是临时路径,所以我们使用这种方法就可以。
用downloadFile只可以获取网络上的图片资源;而getImageInfo则是全能类型,不管是网络上的图片资源,还是小程序中保存的图片。
官方上的说法:getImageInfo的src参数的图片路径可以是相对路径、临时文件路径、存储文件路径(即上面说的全路径)、网络图片路径。
总结:wx.getImageInfo功能更加强大;但是downloadFile则更加专业,因为downloadFile可以读取下载进度等功能。