---
name: jjb-image-cropper
description: 定义 JJB 图片裁剪组件使用规范。在使用 ImageCropper、toDataFile、toDataURL 时使用。必须参考 MD/d.ts 文档。
---

# 通用业务组件使用规范

## 图片裁剪组件

> **⚠️ 重要约束**：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

## 使用

```javascript
import ImageCropper from '@cqsjjb/jjb-react-admin-component/ImageCropper'
```

## 代码演示

```jsx
import React, { useState, useRef } from 'react';
import { Button } from 'antd';
import ImageCropper from '@cqsjjb/jjb-react-admin-component/ImageCropper';

function App() {
  const cropper = useRef();
  const [ resource, setResource ] = useState();
  const onUpload = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.click();
    input.onchange = e => {
      setResource(e.target.files[ 0 ]);
    };
  };

  const onCropper = () => {
    console.log(cropper.current.toDataFile());
  };
  return (
    <>
      <Button onClick={onUpload}>
        上传文件
      </Button>
      <Button onClick={onCropper}>
        获取裁剪后的图片
      </Button>
      <ImageCropper
        ref={cropper}
        resource={resource}
      />
    </>
  );
}
```

## API

| 属性     | 说明                  | 类型                      | 默认值 |
|--------|:--------------------|:------------------------|:----|
| width  | 宽度                  | `number`                | 400 |
| height | 高度                  | `number`                | 400 |
| locked | 是否锁定裁剪框大小           | `boolean`               | false |
| aspect | 裁剪框宽高比              | `number`                | 16 / 9 |
| resource | 裁剪的资源，文件对象或`base64` | `File` \| `string`      | - |
| ref    | 裁剪实例                | `React.Ref<ImageCropperRef>` | - |

## ImageCropperRef 裁剪实例

| 属性                  | 说明                   | 类型                                      | 默认值 |
|---------------------|:---------------------|:----------------------------------------|:----|
| toDataURL           | 转换为dataURL           | `(quality?: number) => ToDataURLResult` | -   |
| toDataFile          | 转换为dataFile          | `() => ToDataFileResult`                | -   |
| toBlobURL           | 转换为blobURL           | `() => string`                          | -   |
| toDataImageText     | 转换为dataImageText     | `() => string`                          | -   |
| toDataImageInstance | 转换为dataImageInstance | `() => Promise<ToDataImageInstanceResult>` | -   |

## ToDataURLResult

| 属性    | 说明     | 类型     | 默认值 |
|-------|:-------|:-------|:----|
| md5   | 文件MD5  | `string` | -   |
| base64 | base64 | `string` | -   |

## ToDataFileResult

| 属性  | 说明   | 类型     | 默认值 |
|-----|:-----|:-------|:----|
| md5 | 文件MD5 | `string` | -   |
| file | 文件对象  | `File`  | -   |

## ToDataImageInstanceResult

| 属性     | 说明   | 类型              | 默认值 |
|--------|:-----|:----------------|:----|
| src    | 文件资源 | `string`         | -   |
| width  | 宽度   | `number`         | -   |
| height | 高度   | `number`         | -   |
| instance | 实例   | `HTMLImageElement` | -   |