fix: 优化去背景图片下载功能,使用图片URL直接下载
- 修改后端返回格式,从返回base64图片内容改为返回图片URL - 前端直接使用返回的图片URL进行下载,避免创建blob URL导致的安全警告 - 简化图片显示逻辑,直接使用URL而不是base64编码 - 修复下载功能中的HTTP安全警告问题
This commit is contained in:
parent
d65b586831
commit
815074c568
@ -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'))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user