# Cropper

图片裁剪组件

## 代码演示

<CodePreview src="/doc-comp/cropper" :height="1500">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！">
    <CollapseContainer title="头像裁剪">
      <CropperAvatar :uploadApi="uploadApi" :value="avatar" />
    </CollapseContainer>

    <CollapseContainer title="矩形裁剪" class="my-4">
      <div class="container p-4">
        <div class="cropper-container mr-10">
          <CropperImage ref="refCropper" :src="img" style="width: 40vw" @cropend="handleCropend" />
        </div>
        <img v-if="cropperImg" :src="cropperImg" class="croppered" alt="" />
      </div>
      <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
    </CollapseContainer>

    <CollapseContainer title="圆形裁剪">
      <div class="container p-4">
        <div class="cropper-container mr-10">
          <CropperImage
            ref="refCropper"
            :src="img"
            style="width: 40vw"
            circled
            @cropend="handleCircleCropend"
          />
        </div>
        <img v-if="circleImg" :src="circleImg" class="croppered" />
      </div>
      <p v-if="circleImg">裁剪后图片信息：{{ circleInfo }}</p>
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CropperAvatar, CropperImage, PageWrapper } from '@eciol/ant-ui';
  import { uploadApi } from '@eciol/api';
  import { CollapseContainer } from '@eciol/share-ui';

  import img from '@/assets/images/header.jpg';
  import { useUserStore } from '@/store/modules/user';

  const info = ref('');
  const cropperImg = ref('');
  const circleInfo = ref('');
  const circleImg = ref('');
  const userStore = useUserStore();
  const avatar = ref(userStore.getUserInfo?.avatar || '');
  function handleCropend({ imgBase64, imgInfo }) {
    info.value = imgInfo;
    cropperImg.value = imgBase64;
  }

  function handleCircleCropend({ imgBase64, imgInfo }) {
    circleInfo.value = imgInfo;
    circleImg.value = imgBase64;
  }
</script>

<style scoped>
  .container {
    display: flex;
    align-items: center;
    width: 100vw;
  }

  .cropper-container {
    width: 40vw;
  }

  .croppered {
    height: 360px;
  }

  p {
    margin: 10px;
  }
</style>

```
</details>
</CodePreview>

## CropperImage

图片裁剪组件

### Usage

```vue
<template>
  <CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
</template>
<script lang="ts" setup>
  import { CropperImage } from '@eciol/ant-ui';
  import img from '@/assets/images/header.jpg';
  const info = ref('');
  const cropperImg = ref('');

  function handleCropend({ imgBase64, imgInfo }) {
    info.value = imgInfo;
    cropperImg.value = imgBase64;
  }
</script>
```

### Props

| 属性            | 类型      | 默认值           | 说明             |
| --------------- | --------- | ---------------- | ---------------- |
| src             | `string`  | -                | 图片源           |
| alt             | `string`  | -                | 图片 alt         |
| circled         | `boolean` | `false`          | 圆形裁剪框       |
| realTimePreview | `boolean` | `true`           | 实时触发预览     |
| height          | `string`  | `360px`          | 高度             |
| crossorigin     | `string`  | -                | crossorigin      |
| imageStyle      | `object`  | ``               | 图片样式         |
| options         | `object`  | `DefaultOptions` | corpperjs 配置项 |

#### DefaultOptions

```ts
{
  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
  cropBoxMovable: true,
  cropBoxResizable: true,
  toggleDragModeOnDblclick: true,
  autoCrop: true,
  background: true,
  highlight: true,
  center: true,
  responsive: true,
  restore: true,
  checkCrossOrigin: true,
  checkOrientation: true,
  scalable: true,
  modal: true,
  guides: true,
  movable: true,
  rotatable: true,
}
```

## CropperAvatar

头像裁剪组件

### Usage

```vue
<template>
  <CropperAvatar :uploadApi="uploadApi" />
</template>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { CropperAvatar } from '@eciol/share-ui';
  import { uploadApi } from '@eciol/api';
</script>
```

### Props

| 属性      | 类型                                              | 默认值  | 说明         | 版本 |
| --------- | ------------------------------------------------- | ------- | ------------ | ---- |
| width     | `string,number`                                   | `200px` | 图片源       |  |
| uploadApi | `({ file: Blob, name: string }) => Promise<void>` | -       | 图片上传接口 |  |
| value     | `String`                                          | -       | 当前头像地址(v-model) | 2.5.3 |
| showBtn   | `Boolean`                                         | true    | 是否显示按钮 | 2.5.3 |
| btnText   | `String`                                          | -       | 按钮文案    | 2.5.3 |
| btnProps  | `ButtonProps`                                     | -       | 按钮的其它属性 | 2.5.3 |

### Events

| 名称      | 参数                                              |  说明         | 版本 |
| --------- | ------------------------------------------------- | ------------ | ---- |
| change    | `value: String`                                   | 当头像上传完成时触发   | 2.5.3 |

### Methods

| 名称      | 定义                                              |  说明         | 版本 |
| --------- | ------------------------------------------------- | ------------ | ---- |
| openModal    | `()=>void`                                 | 打开上传Modal   | 2.5.3 |
| closeModal    | `()=>void`                                 | 关闭上传Modal   | 2.5.3 |