fix: 画布图片下载改为直接下载,不再跳转页面
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

- 使用 fetch 获取图片数据并创建 Blob URL
- 避免跨域图片导致的跳转问题
- 添加下载进度提示和错误处理
This commit is contained in:
Your Name 2026-02-02 11:01:32 +08:00
parent d7c0e66c3e
commit ed71477f15

View File

@ -352,13 +352,44 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
}
};
// 下载图片
const handleDownload = () => {
if (data.src) {
// 下载图片 - 通过 fetch 获取图片数据实现真正的下载(避免跨域问题导致跳转)
const handleDownload = async () => {
if (!data.src) return;
try {
toast.info('正在准备下载...');
// 通过 fetch 获取图片数据
const response = await fetch(data.src);
const blob = await response.blob();
// 创建 Blob URL
const blobUrl = URL.createObjectURL(blob);
// 创建下载链接
const link = document.createElement('a');
link.href = data.src;
link.download = `image-${node.id}.png`;
link.href = blobUrl;
// 从 URL 中提取文件扩展名,默认使用 png
const urlParts = data.src.split('.');
const ext = urlParts[urlParts.length - 1]?.split('?')[0] || 'png';
link.download = `image-${node.id}.${ext}`;
// 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放 Blob URL
URL.revokeObjectURL(blobUrl);
toast.success('下载成功');
} catch (error) {
console.error('下载失败:', error);
toast.error('下载失败,请重试');
// 降级方案:直接打开图片
window.open(data.src, '_blank');
}
};