mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Add crop image demo for Upload (#24174)
* chore: add antd-img-crop * docs: add crop image demo for upload * fix: move antd-img-crop to devDependencies * fix: fix eslint warning * test: update snapshot
This commit is contained in:
南小北
GitHub
parent
f546c8b9e3
commit
bfd5644ff0
@ -106,6 +106,123 @@ exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-upload-picture-card-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-picture-card-container"
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="image.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="image.png"
|
||||
>
|
||||
image.png
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-actions"
|
||||
>
|
||||
<a
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Preview file"
|
||||
>
|
||||
<span
|
||||
aria-label="eye"
|
||||
class="anticon anticon-eye"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture-card"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="image/*"
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
+ Upload
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
|
||||
<span
|
||||
class=""
|
||||
|
||||
66
components/upload/demo/crop-image.md
Normal file
66
components/upload/demo/crop-image.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
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);
|
||||
```
|
||||
@ -168,6 +168,7 @@
|
||||
"@types/warning": "^3.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^2.19.0",
|
||||
"@typescript-eslint/parser": "^2.19.0",
|
||||
"antd-img-crop": "^3.1.1",
|
||||
"antd-pro-merge-less": "^3.0.3",
|
||||
"antd-theme-generator": "^1.1.6",
|
||||
"babel-eslint": "^10.0.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user