mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 12:28:33 +08:00
380cae80bc
Co-authored-by: afc163 <afc163@gmail.com>
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
DownloadOutlined,
|
|
LeftOutlined,
|
|
RightOutlined,
|
|
RotateLeftOutlined,
|
|
RotateRightOutlined,
|
|
SwapOutlined,
|
|
UndoOutlined,
|
|
ZoomInOutlined,
|
|
ZoomOutOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Image, Space } from 'antd';
|
|
|
|
const imageList = [
|
|
'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
|
|
'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
|
|
];
|
|
|
|
// you can download flipped and rotated image
|
|
// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
|
|
const App: React.FC = () => {
|
|
const [current, setCurrent] = React.useState(0);
|
|
|
|
// or you can download flipped and rotated image
|
|
// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
|
|
const onDownload = () => {
|
|
const url = imageList[current];
|
|
const suffix = url.slice(url.lastIndexOf('.'));
|
|
const filename = Date.now() + suffix;
|
|
|
|
fetch(url)
|
|
.then((response) => response.blob())
|
|
.then((blob) => {
|
|
const blobUrl = URL.createObjectURL(new Blob([blob]));
|
|
const link = document.createElement('a');
|
|
link.href = blobUrl;
|
|
link.download = filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
URL.revokeObjectURL(blobUrl);
|
|
link.remove();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Image.PreviewGroup
|
|
preview={{
|
|
toolbarRender: (
|
|
_,
|
|
{
|
|
transform: { scale },
|
|
actions: {
|
|
onActive,
|
|
onFlipY,
|
|
onFlipX,
|
|
onRotateLeft,
|
|
onRotateRight,
|
|
onZoomOut,
|
|
onZoomIn,
|
|
onReset,
|
|
},
|
|
},
|
|
) => (
|
|
<Space size={12} className="toolbar-wrapper">
|
|
<LeftOutlined onClick={() => onActive?.(-1)} />
|
|
<RightOutlined onClick={() => onActive?.(1)} />
|
|
<DownloadOutlined onClick={onDownload} />
|
|
<SwapOutlined rotate={90} onClick={onFlipY} />
|
|
<SwapOutlined onClick={onFlipX} />
|
|
<RotateLeftOutlined onClick={onRotateLeft} />
|
|
<RotateRightOutlined onClick={onRotateRight} />
|
|
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
|
|
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
|
|
<UndoOutlined onClick={onReset} />
|
|
</Space>
|
|
),
|
|
onChange: (index) => {
|
|
setCurrent(index);
|
|
},
|
|
}}
|
|
>
|
|
{imageList.map((item) => (
|
|
<Image key={item} src={item} width={200} />
|
|
))}
|
|
</Image.PreviewGroup>
|
|
);
|
|
};
|
|
|
|
export default App;
|