如何在Antd图片预览操作面板中添加自定义按钮？

我希望在该面板中添加具备下载或分享预览图片功能的按钮，请问是否有可行的实现方式？

我已查阅相关资料及官方文档，但未找到解决方案。

1. 基础下载按钮实现 #

如果该面板是自主开发的，直接添加按钮并绑定下载逻辑即可：

• 先获取预览图的src地址（需确保地址同源或支持CORS）
• 通过JavaScript创建下载链接，触发浏览器下载行为：

function downloadImage(imgSrc) {
  const link = document.createElement('a');
  link.href = imgSrc;
  link.download = 'preview-image.png'; // 可自定义下载文件名
  link.click();
}

在面板中添加按钮：

<button onclick="downloadImage('你的预览图地址')">下载图片</button>

2. 分享功能实现 #

分享功能可结合浏览器原生navigator.shareAPI（支持多数现代浏览器），同时做降级处理：

async function shareImage(imgSrc) {
  // 跨域图片需先转为Blob格式
  const response = await fetch(imgSrc);
  const blob = await response.blob();
  const file = new File([blob], 'preview-image.png', { type: blob.type });
  
  if (navigator.share) {
    try {
      await navigator.share({
        title: '分享预览图',
        files: [file]
      });
    } catch (err) {
      console.error('分享失败:', err);
    }
  } else {
    // 不支持原生分享时，复制图片链接到剪贴板
    await navigator.clipboard.writeText(imgSrc);
    alert('图片链接已复制到剪贴板，可手动分享');
  }
}

对应的按钮代码：

<button onclick="shareImage('你的预览图地址')">分享图片</button>

3. 基于第三方组件的修改（若使用了图片预览类插件） #

如果该面板是第三方组件的一部分：

• 优先查找组件的官方扩展API，比如自定义工具栏按钮的配置项
• 若无扩展入口，可在组件初始化完成后，通过DOM操作动态插入按钮，再绑定上述下载/分享逻辑
• 注意要在组件的生命周期钩子（如onOpen）中执行DOM插入操作，确保元素已渲染

内容的提问来源于stack exchange，提问作者Ahwan