小程序保存图片到手机相册

首先,需要用户授权确认保存图片到手机,调用

 wx.authorize({
    scope: 'scope.writePhotosAlbum',
    success() {
    }
 })

获取用户权限。这里需要注意,一旦用户取消授权,那么弹窗这里无法再次弹出授权框,除非清除掉缓存。我们在这里可以做一个提示,提示用户在取消授权后可在【关于】-【设置】重新授权。如下

小程序保存图片到手机相册_第1张图片

接下来绑定图片的长按事件


	
	提示:长按图片可保存到相册(取消授权后可在右上角【关于】-【设置】中重新授权)

js如下

  save(e) {
    wx.showModal({
      title: '提示',
      content: '确定要保存这张图片吗?',
      success: res => {
        if (res.confirm) {
          console.log('用户点击确定')
          wx.getImageInfo({
            src: e.currentTarget.dataset.src,
            success: re => {
              var path = re.path;
              wx.saveImageToPhotosAlbum({
                filePath: path,
                success: r => {
                  console.log('图片已保存');
                  wx.showToast({
                    title: '图片已保存',
                    icon: 'success'
                  })
                },
                fail: fail => {
                  console.error('保存失败');
                }
              })
            }
          });
        } else if (res.cancel) {
          wx.showToast({
            title: '取消保存',
            icon: 'none'
          })
        }
      }
    })
  }

打开手机相册,图片就已经保存好啦!

你可能感兴趣的:(小程序,前端,小程序,保存图片)