fix: 优化去背景图片下载功能,使用图片URL直接下载

- 修改后端返回格式,从返回base64图片内容改为返回图片URL
- 前端直接使用返回的图片URL进行下载,避免创建blob URL导致的安全警告
- 简化图片显示逻辑,直接使用URL而不是base64编码
- 修复下载功能中的HTTP安全警告问题
This commit is contained in:
jingrow 2025-11-21 01:52:22 +08:00
parent d65b586831
commit 815074c568
2 changed files with 22 additions and 40 deletions

View File

@ -181,10 +181,8 @@ const uploadedImageUrl = ref<string>('')
const resultImage = ref<string>('')
const resultImageUrl = computed(() => {
if (!resultImage.value) return ''
if (resultImage.value.startsWith('data:')) {
return resultImage.value
}
return `data:image/png;base64,${resultImage.value}`
// URL
return resultImage.value
})
const historyList = ref<HistoryItem[]>([])
@ -355,10 +353,7 @@ const selectHistoryItem = (index: number) => {
const getHistoryThumbnailUrl = (item: HistoryItem): string => {
if (item.resultImage) {
if (item.resultImage.startsWith('data:')) {
return item.resultImage
}
return `data:image/png;base64,${item.resultImage}`
return item.resultImage
}
return item.originalImageUrl
}
@ -430,21 +425,22 @@ const handleRemoveBackground = async () => {
if (result.success) {
if (result.data && Array.isArray(result.data) && result.data.length > 0) {
const firstResult = result.data[0]
if (firstResult.success && firstResult.image_content) {
resultImage.value = firstResult.image_content
if (firstResult.success && firstResult.image_url) {
resultImage.value = firstResult.image_url
if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) {
const historyItem: HistoryItem = {
id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
originalImageUrl: uploadedImageUrl.value,
originalImageFile: uploadedImage.value,
resultImage: firstResult.image_content,
resultImage: firstResult.image_url,
timestamp: Date.now()
}
historyList.value.unshift(historyItem)
currentHistoryIndex.value = 0
} else if (currentHistoryIndex.value >= 0) {
historyList.value[currentHistoryIndex.value].resultImage = firstResult.image_content
historyList.value[currentHistoryIndex.value].resultImage = firstResult.image_url
}
message.success(t('Background removed successfully!'))
@ -487,36 +483,25 @@ const handleRemoveBackground = async () => {
}
}
const handleDownload = () => {
const handleDownload = async () => {
if (!resultImage.value) return
try {
const base64Data = resultImage.value.includes(',')
? resultImage.value.split(',')[1]
: resultImage.value
const byteCharacters = atob(base64Data)
const byteNumbers = new Array(byteCharacters.length)
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i)
}
const byteArray = new Uint8Array(byteNumbers)
const blob = new Blob([byteArray], { type: 'image/png' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.href = resultImage.value
link.download = `removed-background-${Date.now()}.png`
link.target = '_blank'
link.style.display = 'none'
document.body.appendChild(link)
link.click()
setTimeout(() => {
document.body.removeChild(link)
URL.revokeObjectURL(url)
}, 100)
message.success(t('Download started'))
} catch (error: any) {
console.error('下载图片失败:', error)
message.error(t('Failed to download image'))
}
}

View File

@ -91,29 +91,26 @@ def remove_background(image_data: Union[str, list]) -> Dict[str, Any]:
if response.status_code == 200:
result_data = response.json()
# 处理返回的图片内容
if 'image_content' in result_data:
image_content = result_data.get('image_content', '')
# 如果包含 data:image 前缀提取base64部分
if ',' in image_content:
image_content = image_content.split(',')[1]
# 使用 image_url 字段
if 'image_url' in result_data:
image_url = result_data.get('image_url', '')
return {
"success": True,
"data": [{
"success": True,
"image_content": image_content,
"image_url": image_url,
"index": 1,
"total": 1
}],
"total_processed": 1,
"total_success": 1
}
else:
return {
"success": False,
"error": result_data.get('error', '知错误')
}
return {
"success": False,
"error": result_data.get('error', '找到图片URL')
}
else:
try:
error_data = response.json()