WeChat ミニプログラムに画像のトリミングと保存機能を実装する

<view class="container">
  <image class="image" src="{{imageSrc}}"></image>
  <movable-area class="crop-area" scale="{{scale}}" rotate="{{rotate}}">
    <movable-view class="crop-image" direction="{{direction}}">
      <image src="{{imageSrc}}" mode="aspectFit"></image>
    </movable-view>
  </movable-area>
  <button class="btn" bindtap="chooseImage">选择图片</button>
  <button class="btn" bindtap="cropImage">裁剪图片</button>
  <button class="btn" bindtap="saveImage">保存图片</button>
</view>

Page({
  data: {
    imageSrc: '',
    scale: 1,
    rotate: 0,
    direction: 0
  },

  chooseImage() {
    wx.chooseImage({
      success: res => {
        this.setData({
          imageSrc: res.tempFilePaths[0]
        });
      }
    });
  },

  cropImage() {
    // 根据裁剪框的位置和大小裁剪图片
    // ...
  },

  saveImage() {
    // 保存裁剪后的图片到手机相册
    // ...
  }
});

<movable-view class="crop-image" direction="{{direction}}">
  <image src="{{imageSrc}}" mode="aspectFit"></image>
</movable-view>

saveImage() {
  wx.saveImageToPhotosAlbum({
    filePath: this.data.imageSrc,
    success: res => {
      wx.showToast({
        title: '保存成功',
        icon: 'success'
      });
    },
    fail: err => {
      wx.showToast({
        title: '保存失败',
        icon: 'none'
      });
    }
  });
}