Wx-小程序-图片预览、保存

点击图片预览

长按图片保存

点击按钮保存到手机相册

view:

<!--wxml-->
<text>点击图片预览、长按保存图片、点击按钮保存到系统相册</text>
<image class="img" src="{{item}}" bindtap='previewImage' wx:for="{{src}}" wx:key="{{item.index}}"></image>
<button bindtap='saveImg'>Save</button>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: [
     'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
      ]
  },
  /**
   * 长按预览保存图片到本地
   */
  previewImage:function(e){
    var that = this;
    wx.previewImage({
      current: that.data.src,//当前显示图片的http链接
      urls: that.data.src, //要预览的图片
    })
    wx.getImageInfo({
      src: that.data.src[0],
      success(res){
        console.log(res)
        console.log(res.width)
        console.log(res.height)
      }
    })
  },

  /**
   * saveImg:点击按钮保存图片到本地
   */
  saveImg: function() {
    var imgSrc = "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"
    wx.downloadFile({
      url: imgSrc,
      success: function(res) {
        console.log(res);
        //图片保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,//图片文件路径
          success(res){
            //接口调用成功
            wx.showToast({
              title: '保存成功',
              duration:1000,//提示延迟时间
            })
          },
          fail(err){
            console.log(err)
            //需要用户授权设置
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny"){
                console.log('用户一开始拒绝了，我们想再次发起授权')
                console.log('打开设置窗口')

                // 用户授权设置
                wx.openSetting({
                  success(settingdata){
                    console.log(settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                    } else {
                      console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                    }
                  }
                })

            }
          }
        })

      }
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },
})

---------------------
作者：Judy1623
来源：CSDN
原文：https://blog.csdn.net/weixin_39100915/article/details/82878867