feat(Image): Update preview toolbar

components/image/__tests__/__snapshots__/demo.test.js.snap

@@ -113,3 +113,12 @@ exports[`renders ./components/image/demo/preview-src.vue correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/image/demo/toolbar-render.vue correctly 1`] = `
+<div class="ant-image" style="width: 200px;"><img width="200" class="ant-image-img" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
+  <!---->
+  <div class="ant-image-mask">
+    <div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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"></path></svg><!----></span>Preview</div>
+  </div>
+</div>
+`;

components/image/demo/index.vue

@@ -7,6 +7,7 @@
     <previewGroupVisibleVue />
     <previewSrc />
     <controlled-preview />
+    <toolbar-render />
   </demo-sort>
 </template>
 
@@ -18,6 +19,7 @@ import previewSrc from './preview-src.vue';
 import PreviewGroup from './preview-group.vue';
 import ControlledPreview from './controlled-preview.vue';
 import previewGroupVisibleVue from './preview-group-visible.vue';
+import ToolbarRender from './toolbar-render.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -33,6 +35,7 @@ export default defineComponent({
     PreviewGroup,
     ControlledPreview,
     previewGroupVisibleVue,
+    ToolbarRender,
   },
 });
 </script>

components/image/demo/preview-group-visible.vue

@@ -23,21 +23,16 @@ Preview a collection from one image.
     src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
     @click="visible = true"
   />
-  <div style="display: none">
-    <a-image-preview-group :preview="{ visible, onVisibleChange: vis => (visible = vis) }">
-      <a-image
-        src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
-      />
-      <a-image
-        src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
-      />
-      <a-image
-        src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
-      />
-    </a-image-preview-group>
-  </div>
+  <a-image-preview-group :preview="{ visible, onVisibleChange: vis => (visible = vis) }">
+    <a-image v-for="item in items" :key="item" :src="item" style="display: none" />
+  </a-image-preview-group>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 const visible = ref(false);
+const items = reactive([
+  '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',
+]);
 </script>

components/image/demo/toolbar-render.vue

@@ -0,0 +1,89 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 自定义工具栏
+  en-US: Custom toolbar render
+---
+
+## zh-CN
+
+可以自定义工具栏并添加下载原图或翻转旋转后图片的按钮。
+
+## en-US
+
+You can customize the toolbar and add a button for downloading the original image or downloading the flipped and rotated image.
+
+</docs>
+
+<template>
+  <a-image :width="200" :src="src">
+    <template #toolbarRender="{ actions, transform }">
+      <a-space :size="12" class="toolbar-wrapper">
+        <DownloadOutlined @click="onDownload" />
+        <SwapOutlined :rotate="90" @click="actions.onFlipY" />
+        <SwapOutlined @click="actions.onFlipX" />
+        <RotateLeftOutlined @click="actions.onRotateLeft" />
+        <RotateRightOutlined @click="actions.onRotateRight" />
+        <ZoomOutOutlined :disabled="transform.scale === 1" @click="actions.onZoomOut" />
+        <ZoomInOutlined :disabled="transform.scale === 50" @click="actions.onZoomIn" />
+      </a-space>
+    </template>
+  </a-image>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  DownloadOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons-vue';
+
+const src = ref('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png');
+const onDownload = () => {
+  fetch(src.value)
+    .then(response => response.blob())
+    .then(blob => {
+      const url = URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = 'image.png';
+      document.body.appendChild(link);
+      link.click();
+      URL.revokeObjectURL(url);
+      link.remove();
+    });
+};
+</script>
+
+<style scoped>
+.toolbar-wrapper {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  padding: 0px 24px;
+  color: #fff;
+  font-size: 20px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 100px;
+  transform: translateX(-50%);
+}
+
+.toolbar-wrapper .anticon {
+  padding: 12px;
+  cursor: pointer;
+}
+
+.toolbar-wrapper .anticon[disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.toolbar-wrapper .anticon:hover {
+  opacity: 0.3;
+}
+</style>

components/image/index.en-US.md

@@ -23,6 +23,7 @@ Previewable image.
 | placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot | - | 2.0.0 |
 | preview | preview config, disabled when `false` | boolean \| [previewType](#previewtype) | true | 2.0.0 |
 | src | Image path | string | - | 2.0.0 |
+| toolbarRender | Custom toolbar render | slot \| [toolbarRenderType](#toolbarrendertype) | - | 4.0.8 |
 | previewMask | custom mask | false \| function \| slot | - | 3.2.0 |
 | width | Image width | string \| number | - | 2.0.0 |
 
@@ -45,4 +46,35 @@ Previewable image.
 }
 ```
 
+### TransformType
+
+```ts
+{
+  x: number;
+  y: number;
+  rotate: number;
+  scale: number;
+  flipX: boolean;
+  flipY: boolean;
+}
+```
+
+### toolbarRenderType
+
+```ts
+{
+  actions: {
+    onFlipY: () => void;
+    onFlipX: () => void;
+    onRotateLeft: () => void;
+    onRotateRight: () => void;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+  };
+  transform: TransformType,
+  current: number;
+  total: number;
+}
+```
+
 Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)

components/image/index.zh-CN.md

@@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 | placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot | - | 2.0.0 |
 | preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewtype) | true | 2.0.0 |
 | src | 图片地址 | string | - | 2.0.0 |
+| toolbarRender | 自定义工具栏 | slot \| [toolbarRenderType](#toolbarRenderType) | - | 4.0.8 |
 | previewMask | 自定义 mask | false \| function \| slot | - | 3.2.0 |
 | width | 图像宽度 | string \| number | - | 2.0.0 |
 
@@ -46,4 +47,35 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 }
 ```
 
+### TransformType
+
+```ts
+{
+  x: number;
+  y: number;
+  rotate: number;
+  scale: number;
+  flipX: boolean;
+  flipY: boolean;
+}
+```
+
+### toolbarRenderType
+
+```ts
+{
+  actions: {
+    onFlipY: () => void;
+    onFlipX: () => void;
+    onRotateLeft: () => void;
+    onRotateRight: () => void;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+  };
+  transform: TransformType,
+  current: number;
+  total: number;
+}
+```
+
 其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)