Browse Source
* feat(Image): imageRender、toolbarRender、onTransform、items、minScale、maxScale * test: update snapshots * demo: revokeObjectURL url * docs: update * docs: update * docs: update * fix: revert style * docs: update mdpull/42821/merge
daisy
1 year ago
committed by
GitHub
GitHub
12 changed files with 602 additions and 383 deletions
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
可以自定义预览内容。 |
|||
|
|||
## en-US |
|||
|
|||
You can customize the preview content. |
|||
@ -0,0 +1,24 @@ |
|||
import { Image } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Image |
|||
width={200} |
|||
preview={{ |
|||
imageRender: () => ( |
|||
<video |
|||
muted |
|||
width="100%" |
|||
controls |
|||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ" |
|||
/> |
|||
), |
|||
toolbarRender: (_, { icons: { closeIcon } }) => ( |
|||
<ul className="ant-image-preview-operations">{closeIcon}</ul> |
|||
), |
|||
}} |
|||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" |
|||
/> |
|||
); |
|||
|
|||
export default App; |
|||
@ -1,26 +1,19 @@ |
|||
import React, { useState } from 'react'; |
|||
import { Image } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const App: React.FC = () => { |
|||
const [visible, setVisible] = useState(false); |
|||
|
|||
return ( |
|||
<> |
|||
<Image |
|||
preview={{ visible: false }} |
|||
width={200} |
|||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" |
|||
onClick={() => setVisible(true)} |
|||
/> |
|||
<div style={{ display: 'none' }}> |
|||
<Image.PreviewGroup preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}> |
|||
<Image src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" /> |
|||
<Image src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp" /> |
|||
<Image src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp" /> |
|||
</Image.PreviewGroup> |
|||
</div> |
|||
</> |
|||
); |
|||
}; |
|||
const App: React.FC = () => ( |
|||
<Image.PreviewGroup |
|||
items={[ |
|||
'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp', |
|||
'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp', |
|||
'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp', |
|||
]} |
|||
> |
|||
<Image |
|||
width={200} |
|||
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" |
|||
/> |
|||
</Image.PreviewGroup> |
|||
); |
|||
|
|||
export default App; |
|||
|
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
可以自定义工具栏。 |
|||
|
|||
## en-US |
|||
|
|||
You can customize the toolbar. |
|||
@ -0,0 +1,60 @@ |
|||
import { DownloadOutlined } from '@ant-design/icons'; |
|||
import { Image } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; |
|||
|
|||
const App: React.FC = () => { |
|||
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; |
|||
link.download = 'image.jpg'; |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
URL.revokeObjectURL(url); |
|||
link.remove(); |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<Image |
|||
width={200} |
|||
preview={{ |
|||
toolbarRender: ( |
|||
_, |
|||
{ |
|||
icons: { |
|||
flipYIcon, |
|||
flipXIcon, |
|||
rotateLeftIcon, |
|||
rotateRightIcon, |
|||
zoomOutIcon, |
|||
zoomInIcon, |
|||
closeIcon, |
|||
}, |
|||
}, |
|||
) => ( |
|||
<ul className="ant-image-preview-operations"> |
|||
<li className="ant-image-preview-operations-operation" onClick={onDownload}> |
|||
<DownloadOutlined className="ant-image-preview-operations-icon" /> |
|||
</li> |
|||
{flipYIcon} |
|||
{flipXIcon} |
|||
{rotateLeftIcon} |
|||
{rotateRightIcon} |
|||
{zoomOutIcon} |
|||
{zoomInIcon} |
|||
{closeIcon} |
|||
</ul> |
|||
), |
|||
}} |
|||
src={src} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
export default App; |
|||
Loading…
Reference in new issue