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

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

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

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("保存到系统成功")      }    })  }