微信小程序选择图片和放大预览图片功能

微信小程序中选择图片和放大预览图片功能涉及以下两个API：wx.chooseImage()和wx.previewImage()。下面我会分别详细介绍它们的用法，并提供示例说明。

选择图片（wx.chooseImage()）

用途

wx.chooseImage()用于从相册或者拍照获取图片，支持一次选择多张图片。

语法

wx.chooseImage({
  count: 9, // 最多同时上传的图片数量，默认9
  sizeType: ['original', 'compressed'], // 所选的图片的尺寸，默认['original','compressed']，原图和压缩图
  sourceType: ['album', 'camera'], // 选择图片的来源，默认['album','camera']，从相册选择和通过相机拍照
  success: function (res) {
    // success
  },
  fail: function () {
    // fail
  },
  complete: function () {
    // complete
  }
})

示例

下面的示例展示了从相册选择一张图片的用法：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album'],
  success: function (res) {
    console.log(res.tempFilePaths);
  }
})

在用户点击“选择图片”按钮后，系统会弹出一个菜单，用户可以选择从相册中选择一张图片。选择完成后会将图片的本地临时文件路径传递到success回调函数中，我们可以通过res.tempFilePaths来获取这张图片的路径。

预览图片（wx.previewImage()）

用途

wx.previewImage()用于预览图片，可以实现放大、缩小、滑动切换等操作。

语法

wx.previewImage({
  current: '', // 当前显示图片的链接
  urls: [], // 需要预览的图片链接列表
  success: function () {
    // success
  },
  fail: function () {
    // fail
  },
  complete: function () {
    // complete
  }
})

示例

下面的示例展示了如何预览一张图片：

wx.previewImage({
  current: 'http://example.com/images/1.jpg', // 当前显示图片的链接
  urls: ['http://example.com/images/1.jpg'], // 需要预览的图片链接列表
})

在用户点击某张图片后，可以调用wx.previewImage()来打开预览界面，current参数指定了当前展示的图片链接，urls参数指定了所有需要预览的图片链接列表。