fix: 画布图片下载改为直接下载,不再跳转页面
- 使用 fetch 获取图片数据并创建 Blob URL - 避免跨域图片导致的跳转问题 - 添加下载进度提示和错误处理
This commit is contained in:
parent
d7c0e66c3e
commit
ed71477f15
@ -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');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user