100 lines
3.3 KiB
Markdown
100 lines
3.3 KiB
Markdown
|
---
|
||
|
|
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` | - |
|