微信小程序图片四个API用法

小程序的图片API主要是

• wx.chooseImage 选择图片
• wx.previewImage 预览图片
• wx.getImageInfo 获取图片的信息
• wx.saveImageToPhotosAlbum 保存图片

以下通过一个案例是四种API的使用方法

描述：
1. 首先选择本地图片保存到变量数组中，然后再页面中渲染图片。
2. 给每个图片一个事件，并用data-传递当前图片的url，然后通过相应的事件预览图片。
3. 预览成功后获取图片的相关信息，
4. 最后使用保存图片

wxml:
<button type="primary" bindtap="chooseImg">选择图片</button>
<!-- 通过获取的图片数组，遍历图片 -->
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
  <image src='{{item}}' data-url="{{item}}" bindtap='previewImg'></image>
</block> 

js:
Page({
  data: {
    imgUrls: []
  },
  onLoad: function (options) {
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 1000,
      mask: true,
      success: function(){
        console.log('加载开始了');
      }
    })
  },
  chooseImg: function(){
    var that = this;
    wx.chooseImage({ //选择图片
      count: 9, //最多可以选择图片的张数
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        that.setData({
          imgUrls: res.tempFilePaths  //将获取的图片url数组赋值给变量
        });
      },
    })

    wx.hideToast();
  },
  previewImg: function(e){
    var current = e.target.dataset.url;
    wx.previewImage({ //预览图片
      current: current, //需要预览的当前图片的url
      urls: this.data.imgUrls,  //需要预览的图片链接列表
      success: function(){
        console.log("图片预览成功");

        wx.getImageInfo({ //获取图片的信息
          src: current,
          success: function(res){
            console.log(res);  //width,height等属性
            wx.saveImageToPhotosAlbum({ //保存图片
              filePath: res.path, //图片文件路径
              success: function(res){
                wx.showToast({
                  title: '保存成功',
                  icon: 'success',
                  duration: 2000
                })
                console.log('保存图片成功',res);
              },
              fail: function(err){
                console.log(err);
                //用户授权
                if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
                  wx.openSetting({
                    success(settingdata) {
                      console.log(settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                      } else {
                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                      }
                    }
                  })
                }
              }
            })
          }
        })
      }
    })
  }
})