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

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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值