uniapp实现图片裁剪功能

在Uniapp中，可以使用uni-image-cropper插件来实现图片裁剪功能。以下是基本步骤：

1. 安装uni-image-cropper插件。可以在HBuilderX中打开插件市场，搜索uni-image-cropper并安装。

2. 在需要使用图片裁剪的页面中引入uni-image-cropper组件。

<template>
  <view>
    <uni-image-cropper :src="imgSrc" :ratio="ratio" mode="rectangle" @crop="cropImage"></uni-image-cropper>
  </view>
</template>

<script>
import uniImageCropper from '@/components/uni-image-cropper/uni-image-cropper.vue'

export default {
  components: {
    uniImageCropper
  },
  data() {
    return {
      imgSrc: '',
      ratio: 1
    }
  },
  methods: {
    // 裁剪完成回调函数
    cropImage(e) {
      console.log(e.detail)
    }
  }
}
</script>

3. 在data中定义imgSrc和ratio变量，imgSrc为待裁剪图片的路径，ratio为裁剪框的宽高比。

4. 在cropImage函数中获取裁剪结果。

注意：在使用uni-image-cropper插件时，需要在manifest.json中添加图片读取和保存权限。

{
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "获取你的位置信息将帮助我们提供更好的服务"
      },
      "scope.writePhotosAlbum": {
        "desc": "保存图片到相册"
      },
      "scope.album": {
        "desc": "读取相册图片"
      },
      "scope.camera": {
        "desc": "使用摄像头拍照或录制"
      }
    }
  }
}