product/Nano-Banana-AI-Image-Editor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

移除了生成详情中的下载按钮

Browse Source
This commit is contained in:
袁涛
2025-09-19 02:18:53 +08:00
parent 29a326ac7d
commit c5ee5dd2a3
5 changed files with 132 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/HistoryPanel.tsx
View File

@@ -1178,75 +1178,7 @@ export const HistoryPanel: React.FC = () => {
})()}
</div>
{/* 操作 */}
<div className="space-y-2 flex-shrink-0 pt-2 border-t border-gray-100">
<Button
variant="outline"
size="sm"
className="w-full h-9 text-sm card"
onClick={() => {
// 查找当前显示的图像（生成记录或编辑记录）
let imageUrl: string | null = null;
if (selectedGenerationId) {
const { canvasImage } = useAppStore.getState();
imageUrl = canvasImage;
} else {
// 如果没有选择生成记录，尝试获取当前画布图像
const { canvasImage } = useAppStore.getState();
imageUrl = canvasImage;
}
if (imageUrl) {
// 处理数据URL和常规URL
if (imageUrl.startsWith('data:') || imageUrl.startsWith('blob:')) {
// 对于Blob URL，我们需要获取实际的Blob数据
if (imageUrl.startsWith('blob:')) {
// 从AppStore获取Blob
const blob = useAppStore.getState().getBlob(imageUrl);
if (blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
return;
}
}
// 对于数据URL，直接下载
const link = document.createElement('a');
link.href = imageUrl;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
// 对于外部URL，我们需要获取并转换为blob
fetch(imageUrl)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
});
}
}
}}
disabled={!selectedGenerationId && !useAppStore.getState().canvasImage}
>
<Download className="h-4 w-4 mr-2" />
下载图像
</Button>
</div>
{/* 图像预览模态框 */}
<ImagePreviewModal

134
src/components/ImageCanvas.tsx
View File

@@ -318,14 +318,142 @@ export const ImageCanvas: React.FC = () => {
};
const handleDownload = () => {
if (canvasImage) {
if (canvasImage.startsWith('data:')) {
// 直接下载当前画布内容
const stage = stageRef.current;
if (stage) {
try {
// 使用Konva的toDataURL方法获取画布内容
const dataURL = stage.toDataURL();
// 创建下载链接
const link = document.createElement('a');
link.href = canvasImage;
link.href = dataURL;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
console.log('画布内容下载成功');
} catch (error) {
console.error('下载画布内容时出错:', error);
// 如果Konva下载失败，回退到下载原始图像
if (canvasImage) {
// 处理不同类型的URL
if (canvasImage.startsWith('data:')) {
// base64格式
const link = document.createElement('a');
link.href = canvasImage;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else if (canvasImage.startsWith('blob:')) {
// Blob URL格式
fetch(canvasImage)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 清理创建的URL
setTimeout(() => URL.revokeObjectURL(url), 100);
})
.catch(error => {
console.error('下载Blob图像时出错:', error);
});
} else {
// 普通URL格式
fetch(canvasImage)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 清理创建的URL
setTimeout(() => URL.revokeObjectURL(url), 100);
})
.catch(error => {
console.error('下载图像时出错:', error);
// 如果fetch失败，尝试直接下载
const link = document.createElement('a');
link.href = canvasImage;
link.download = `nano-banana-${Date.now()}.png`;
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
}
}
} else {
console.warn('Stage未初始化，无法下载画布内容');
// 回退到下载原始图像
if (canvasImage) {
// 处理不同类型的URL
if (canvasImage.startsWith('data:')) {
// base64格式
const link = document.createElement('a');
link.href = canvasImage;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else if (canvasImage.startsWith('blob:')) {
// Blob URL格式
fetch(canvasImage)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 清理创建的URL
setTimeout(() => URL.revokeObjectURL(url), 100);
})
.catch(error => {
console.error('下载Blob图像时出错:', error);
});
} else {
// 普通URL格式
fetch(canvasImage)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 清理创建的URL
setTimeout(() => URL.revokeObjectURL(url), 100);
})
.catch(error => {
console.error('下载图像时出错:', error);
// 如果fetch失败，尝试直接下载
const link = document.createElement('a');
link.href = canvasImage;
link.download = `nano-banana-${Date.now()}.png`;
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
}
}
};