微信小程序> 小程序保存图片到本地相册

小程序保存图片到本地相册

浏览量:5505 时间: 来源:Zhoulizhen_

项目中需要保存带有水印的图片到本地相册。
小程序
现在图片上的水印是我拿到二维码定位到图片上做展示效果,所以真正带水印的图片是要在点击保存的时候从后台获取当前展示的图片的带水印图片,现在这是一个不自己切换的轮播图效果。
在点击保存时候:
小程序
在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可以读取下载进度等功能。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎