2023-07-07 09:54:19 +08:00
|
|
|
import {
|
|
|
|
DownloadOutlined,
|
|
|
|
RotateLeftOutlined,
|
|
|
|
RotateRightOutlined,
|
|
|
|
SwapOutlined,
|
|
|
|
ZoomInOutlined,
|
|
|
|
ZoomOutOutlined,
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
import { Image, Space } from 'antd';
|
2023-06-21 19:58:28 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
2023-07-12 09:43:51 +08:00
|
|
|
// or you can download flipped and rotated image
|
|
|
|
// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
|
2023-06-21 19:58:28 +08:00
|
|
|
const onDownload = () => {
|
|
|
|
fetch(src)
|
|
|
|
.then((response) => response.blob())
|
|
|
|
.then((blob) => {
|
|
|
|
const url = URL.createObjectURL(new Blob([blob]));
|
|
|
|
const link = document.createElement('a');
|
|
|
|
link.href = url;
|
2023-07-07 09:54:19 +08:00
|
|
|
link.download = 'image.png';
|
2023-06-21 19:58:28 +08:00
|
|
|
document.body.appendChild(link);
|
|
|
|
link.click();
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
link.remove();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Image
|
|
|
|
width={200}
|
2023-07-07 09:54:19 +08:00
|
|
|
src={src}
|
2023-06-21 19:58:28 +08:00
|
|
|
preview={{
|
|
|
|
toolbarRender: (
|
|
|
|
_,
|
|
|
|
{
|
2023-07-07 09:54:19 +08:00
|
|
|
transform: { scale },
|
|
|
|
actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
|
2023-06-21 19:58:28 +08:00
|
|
|
},
|
|
|
|
) => (
|
2023-07-07 09:54:19 +08:00
|
|
|
<Space size={12} className="toolbar-wrapper">
|
|
|
|
<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} />
|
|
|
|
</Space>
|
2023-06-21 19:58:28 +08:00
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|