uniapp 头像裁剪

在 UniApp 中实现头像裁剪功能可以使用第三方插件来完成，比如使用 `uni-cropper` 插件。下面是一个简单的示例：

1. 首先，在你的 UniApp 项目中安装 `uni-cropper` 插件。可以使用 npm 或者 yarn 进行安装：

npm install uni-cropper

2. 在需要使用头像裁剪功能的页面引入 `uni-cropper` 组件：

<template>
  <view>
    <button @click="openCropper">选择图片</button>
    <uni-cropper v-if="showCropper" :src="imageSrc" @confirm="handleConfirm" @cancel="handleCancel" />
  </view>
</template>

<script>
import uniCropper from 'uni-cropper';

export default {
  components: {
    uniCropper
  },
  data() {
    return {
      showCropper: false,
      imageSrc: ''
    };
  },
  methods: {
    openCropper() {
      // 打开头像裁剪组件
      this.showCropper = true;
    },
    handleConfirm({ detail }) {
      // 裁剪完成的回调函数
      console.log('裁剪结果:', detail);
      this.showCropper = false;
    },
    handleCancel() {
      // 取消裁剪的回调函数
      this.showCropper = false;
    }
  }
};
</script>

在上述示例中，我们通过点击按钮触发 `openCropper` 方法来打开头像裁剪组件。头像裁剪组件的 `src` 属性用于指定待裁剪的图片地址。用户完成裁剪后，会触发 `handleConfirm` 方法，并将裁剪结果通过参数传递给回调函数。如果用户取消裁剪，会触发 `handleCancel` 方法。

这样，你就可以在 UniApp 中实现头像裁剪功能了。当然，你也可以根据自己的需求自定义头像裁剪组件，或者使用其他的第三方插件来完成。