uni-app 图片自由裁剪功能

在uni-app中实现图片自由裁剪功能，可以利用Canvas API进行图像处理。以下是一个简单的示例代码，展示如何使用Canvas实现图片的自由裁剪功能。

首先，需要在页面中添加一个Canvas组件和一个上传图片的按钮，以及用于裁剪操作的控制元素（如裁剪框和调整手柄）。

<template>
  <view class="container">
    <button @click="chooseImage">选择图片</button>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <view class="crop-box" :style="cropBoxStyle">
      <view class="handle" :style="topLeftHandleStyle" @touchstart="startDrag(0)"></view>
      <view class="handle" :style="topRightHandleStyle" @touchstart="startDrag(1)"></view>
      <view class="handle" :style="bottomLeftHandleStyle" @touchstart="startDrag(2)"></view>
      <view class="handle" :style="bottomRightHandleStyle" @touchstart="startDrag(3)"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgPath: '',
      cropBox: { x: 50, y: 50, width: 200, height: 200 },
      dragging: false,
      dragStart: { x: 0, y: 0 },
      dragHandle: -1,
    };
  },
  computed: {
    cropBoxStyle() {
      return `position: absolute; top: ${this.cropBox.y}px; left: ${this.cropBox.x}px; width: ${this.cropBox.width}px; height: ${this.cropBox.height}px; border: 1px solid #000;`;
    },
    topLeftHandleStyle() { return `position: absolute; top: -5px; left: -5px;`; },
    topRightHandleStyle() { return `position: absolute; top: -5px; right: -5px;`; },
    bottomLeftHandleStyle() { return `position: absolute; bottom: -5px; left: -5px;`; },
    bottomRightHandleStyle() { return `position: absolute; bottom: -5px; right: -5px;`; },
  },
  methods: {
    chooseImage() {
      // 选择图片逻辑
    },
    startDrag(handle) {
      // 开始拖动逻辑
    },
    // 其他拖动处理逻辑...
    drawCroppedImage() {
      const ctx = uni.createCanvasContext('myCanvas');
      ctx.drawImage(this.imgPath, this.cropBox.x, this.cropBox.y, this.cropBox.width, this.cropBox.height, 0, 0, 300, 300);
      ctx.draw();
    },
  },
};
</script>

<style>
.container { position: relative; }
.crop-box { position: absolute; }
.handle { width: 10px; height: 10px; background: #ff0000; }
</style>

请注意，此示例仅展示了基本框架和关键元素。实际实现中，需要补充chooseImage方法以选择图片，并完整实现startDrag及其他拖动处理逻辑（如drag和dragEnd事件处理）。在拖动过程中，需实时更新cropBox的位置和尺寸，并在拖动结束时调用drawCroppedImage方法重新绘制裁剪后的图片。

此外，为了提升用户体验，还可以添加缩放、旋转等功能，这些都可以通过Canvas API实现。