uni-app 小程序图片裁剪功能需求

在uni-app中实现小程序图片裁剪功能，通常可以借助第三方库或者自定义组件来完成。以下是一个使用canvas和uni.getImageInfo API 实现简单图片裁剪功能的代码案例。

1. 页面布局（index.vue）

首先，我们需要在页面上放置一个图片显示区域和一个裁剪按钮。

<template>
  <view class="container">
    <image :src="imageSrc" class="original-image" mode="widthFix"></image>
    <button @click="cropImage">裁剪图片</button>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <image :src="croppedImageSrc" class="cropped-image" v-if="croppedImageSrc" mode="widthFix"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg', // 替换为你的图片路径
      croppedImageSrc: ''
    };
  },
  methods: {
    cropImage() {
      const ctx = uni.createCanvasContext('myCanvas');
      uni.getImageInfo({
        src: this.imageSrc,
        success: (res) => {
          const { width, height } = res;
          // 设定裁剪区域，例如裁剪图片的中心100x100区域
          const cropX = width / 2 - 50;
          const cropY = height / 2 - 50;
          const cropWidth = 100;
          const cropHeight = 100;
          
          ctx.drawImage(this.imageSrc, cropX, cropY, cropWidth, cropHeight, 0, 0, 300, 300);
          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: (canvasRes) => {
                this.croppedImageSrc = canvasRes.tempFilePath;
              }
            });
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.original-image, .cropped-image {
  margin: 10px 0;
  max-width: 100%;
}
</style>

2. 说明

• uni.getImageInfo API 用于获取图片信息，包括图片的宽度和高度。
• uni.createCanvasContext 方法创建了一个 canvas 绘图上下文。
• ctx.drawImage 方法用于在 canvas 上绘制图片，并指定了源图片的裁剪区域和目标 canvas 上的绘制区域。
• uni.canvasToTempFilePath 方法将 canvas 内容导出为图片文件路径。

3. 注意事项

• 图片路径imageSrc需要替换为你的实际图片路径。
• 裁剪区域可以根据实际需求调整。
• 示例中的裁剪区域是图片的中心100x100区域，并绘制到300x300的canvas上，你可以根据需求调整这些参数。

这个简单的示例展示了如何在uni-app中使用canvas实现图片裁剪功能。根据实际需求，你可能需要增加更多的交互功能，比如用户手动选择裁剪区域等。