You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.5 KiB
67 lines
1.5 KiB
5 years ago
|
---
|
||
|
|
order: 14
|
||
|
|
title:
|
||
|
|
zh-CN: 上传前裁切图片
|
||
|
|
en-US: Crop image before uploading
|
||
|
|
---
|
||
|
|
|
||
|
|
## zh-CN
|
||
|
|
|
||
|
|
配合 [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) 实现上传前裁切图片。
|
||
|
|
|
||
|
|
## en-US
|
||
|
|
|
||
|
|
Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { Upload } from 'antd';
|
||
|
|
import ImgCrop from 'antd-img-crop';
|
||
|
|
|
||
|
|
const Demo = () => {
|
||
|
|
const [fileList, setFileList] = useState([
|
||
|
|
{
|
||
|
|
uid: '-1',
|
||
|
|
name: 'image.png',
|
||
|
|
status: 'done',
|
||
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const onChange = ({ fileList: newFileList }) => {
|
||
|
|
setFileList(newFileList);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onPreview = async file => {
|
||
|
|
let src = file.url;
|
||
|
|
if (!src) {
|
||
|
|
src = await new Promise(resolve => {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.readAsDataURL(file.originFileObj);
|
||
|
|
reader.onload = () => resolve(reader.result);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const image = new Image();
|
||
|
|
image.src = src;
|
||
|
|
const imgWindow = window.open(src);
|
||
|
|
imgWindow.document.write(image.outerHTML);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ImgCrop rotate>
|
||
|
|
<Upload
|
||
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||
|
|
listType="picture-card"
|
||
|
|
fileList={fileList}
|
||
|
|
onChange={onChange}
|
||
|
|
onPreview={onPreview}
|
||
|
|
>
|
||
|
|
{fileList.length < 5 && '+ Upload'}
|
||
|
|
</Upload>
|
||
|
|
</ImgCrop>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ReactDOM.render(<Demo />, mountNode);
|
||
|
|
```
|