微信小程序裁剪图片

**图片裁剪功能在小程序中的应用** 

在小程序开发中，图片裁剪功能有着广泛的应用。例如，在用户上传头像时，我们需要对头像图片进行裁剪，以使其大小和形状符合要求。又或者，在用户发布商品时，我们需要对商品图片进行裁剪，以使其更加美观。

**微信小程序中图片裁剪组件的使用方法** 

为了在微信小程序中使用图片裁剪功能，我们可以使用内置的图片裁剪组件`wx.chooseImage()`。此组件提供了多种裁剪功能，可以满足我们的不同需求。

**1. 选择图片** 

首先，我们需要使用`wx.chooseImage()`组件来选择要裁剪的图片。

```javascript
wx.chooseImage({
  count: 1, // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success(res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    const tempFilePath = res.tempFilePaths[0];
  }
});
```

**2. 创建裁剪区域** 

选择图片后，我们需要创建一个裁剪区域。裁剪区域可以是矩形、圆形或其他形状。

```javascript
wx.createSelectorQuery().select('#my-image').boundingClientRect(rect => {
  // 获取图片的宽高
  const width = rect.width;
  const height = rect.height;

  // 创建裁剪区域
  const cropArea = {
    left: 0,
    top: 0,
    width,
    height
  };
});
```

**3. 裁剪图片** 

创建裁剪区域后，我们可以使用`wx.getImageInfo()`组件来裁剪图片。

```javascript
wx.getImageInfo({
  src: tempFilePath,
  success(res) {
    // 获取图片的原始宽高
    const originalWidth = res.width;
    const originalHeight = res.height;

    // 计算裁剪后的图片宽高
    const croppedWidth = cropArea.width;
    const croppedHeight = cropArea.height;

    // 裁剪图片
    wx.canvasToTempFilePath({
      x: cropArea.left,
      y: cropArea.top,
      width: croppedWidth,
      height: croppedHeight,
      destWidth: croppedWidth,
      destHeight: croppedHeight,
      canvasId: 'my-canvas',
      success(res) {
        // 返回裁剪后图片的临时文件路径
        const croppedFilePath = res.tempFilePath;
      }
    });
  }
});
```

**4. 保存裁剪后的图片** 

裁剪图片后，我们可以使用`wx.saveImageToPhotosAlbum()`组件来保存裁剪后的图片到相册。

```javascript
wx.saveImageToPhotosAlbum({
  filePath: croppedFilePath,
  success() {
    wx.showToast({
      title: '图片保存成功'
    });
  }
});
```

**总结** 

通过以上步骤，我们就可以使用微信小程序中的图片裁剪组件来裁剪图片。通过此方法，我们可以轻松地实现图片的旋转、大小裁剪等功能，从而使图片更加符合我们的需求。