微信小程序开发-图片（媒体）

相关官方文档链接：媒体-图片

对于选择图片，别的不说，先来一波代码再分析。

wxml：

<button bindtap='chooseImg' type='primary'>选择图片</button>
  <view class="imgView" style='width:100px;height:100px;margin:10px auto;border:1px solid #000;'>
  <image src='{{imgSrc}}' style='width:100%;height:100%;'></image>
</view>

js：

chooseImg: function () {
    var that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res);
        var tempFilePaths = res.tempFilePaths;
        var tempFiles = res.tempFiles;
        console.log(tempFilePaths);
        console.log(tempFiles);
        that.setData({
          imgSrc: tempFilePaths
        })
      },
    })
  }

上传图片成功。

预览图片：

wxml：

<view>预览图片</view>
<view class="content">  
    <view wx:for="{{imglist}}" wx:for-item="image" class="previewimg">  
        <image src="{{image}}" data-src="image" bindtap="previewImage"></image>  
    </view>  
</view>

js：

data:{
    imglist: [
      'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=621999311,1727379372&fm=27&gp=0.jpg',   
      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=499261909,3433823994&fm=27&gp=0.jpg',  
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2822716709,4140849071&fm=27&gp=0.jpg'   
    ]
  }

获取图片信息：

wx.chooseImage({
      success: function (res) {
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            console.log(res.width)
            console.log(res.height)
          }
        })
      }
    })

保存图片到系统相册：

save:function(){
    var that =this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imgSrc,
      success(res) {
        console.log("保存到系统成功")
      }
    })
  }