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 resultImage = ref<string>('')
|
||||||
const resultImageUrl = computed(() => {
|
const resultImageUrl = computed(() => {
|
||||||
if (!resultImage.value) return ''
|
if (!resultImage.value) return ''
|
||||||
if (resultImage.value.startsWith('data:')) {
|
// 直接返回图片URL
|
||||||
return resultImage.value
|
return resultImage.value
|
||||||
}
|
|
||||||
return `data:image/png;base64,${resultImage.value}`
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const historyList = ref<HistoryItem[]>([])
|
const historyList = ref<HistoryItem[]>([])
|
||||||
@ -355,10 +353,7 @@ const selectHistoryItem = (index: number) => {
|
|||||||
|
|
||||||
const getHistoryThumbnailUrl = (item: HistoryItem): string => {
|
const getHistoryThumbnailUrl = (item: HistoryItem): string => {
|
||||||
if (item.resultImage) {
|
if (item.resultImage) {
|
||||||
if (item.resultImage.startsWith('data:')) {
|
return item.resultImage
|
||||||
return item.resultImage
|
|
||||||
}
|
|
||||||
return `data:image/png;base64,${item.resultImage}`
|
|
||||||
}
|
}
|
||||||
return item.originalImageUrl
|
return item.originalImageUrl
|
||||||
}
|
}
|
||||||
@ -430,21 +425,22 @@ const handleRemoveBackground = async () => {
|
|||||||
if (result.success) {
|
if (result.success) {
|
||||||
if (result.data && Array.isArray(result.data) && result.data.length > 0) {
|
if (result.data && Array.isArray(result.data) && result.data.length > 0) {
|
||||||
const firstResult = result.data[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) {
|
if (currentHistoryIndex.value === -1 && uploadedImage.value && uploadedImageUrl.value) {
|
||||||
const historyItem: HistoryItem = {
|
const historyItem: HistoryItem = {
|
||||||
id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
id: `history-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||||
originalImageUrl: uploadedImageUrl.value,
|
originalImageUrl: uploadedImageUrl.value,
|
||||||
originalImageFile: uploadedImage.value,
|
originalImageFile: uploadedImage.value,
|
||||||
resultImage: firstResult.image_content,
|
resultImage: firstResult.image_url,
|
||||||
timestamp: Date.now()
|
timestamp: Date.now()
|
||||||
}
|
}
|
||||||
historyList.value.unshift(historyItem)
|
historyList.value.unshift(historyItem)
|
||||||
currentHistoryIndex.value = 0
|
currentHistoryIndex.value = 0
|
||||||
} else if (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!'))
|
message.success(t('Background removed successfully!'))
|
||||||
@ -487,36 +483,25 @@ const handleRemoveBackground = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDownload = () => {
|
const handleDownload = async () => {
|
||||||
if (!resultImage.value) return
|
if (!resultImage.value) return
|
||||||
|
|
||||||
try {
|
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')
|
const link = document.createElement('a')
|
||||||
link.href = url
|
link.href = resultImage.value
|
||||||
link.download = `removed-background-${Date.now()}.png`
|
link.download = `removed-background-${Date.now()}.png`
|
||||||
|
link.target = '_blank'
|
||||||
link.style.display = 'none'
|
link.style.display = 'none'
|
||||||
document.body.appendChild(link)
|
document.body.appendChild(link)
|
||||||
link.click()
|
link.click()
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.body.removeChild(link)
|
document.body.removeChild(link)
|
||||||
URL.revokeObjectURL(url)
|
|
||||||
}, 100)
|
}, 100)
|
||||||
|
|
||||||
message.success(t('Download started'))
|
message.success(t('Download started'))
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
|
console.error('下载图片失败:', error)
|
||||||
message.error(t('Failed to download image'))
|
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:
|
if response.status_code == 200:
|
||||||
result_data = response.json()
|
result_data = response.json()
|
||||||
# 处理返回的图片内容
|
|
||||||
if 'image_content' in result_data:
|
# 使用 image_url 字段
|
||||||
image_content = result_data.get('image_content', '')
|
if 'image_url' in result_data:
|
||||||
# 如果包含 data:image 前缀,提取base64部分
|
image_url = result_data.get('image_url', '')
|
||||||
if ',' in image_content:
|
|
||||||
image_content = image_content.split(',')[1]
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
"success": True,
|
"success": True,
|
||||||
"data": [{
|
"data": [{
|
||||||
"success": True,
|
"success": True,
|
||||||
"image_content": image_content,
|
"image_url": image_url,
|
||||||
"index": 1,
|
"index": 1,
|
||||||
"total": 1
|
"total": 1
|
||||||
}],
|
}],
|
||||||
"total_processed": 1,
|
"total_processed": 1,
|
||||||
"total_success": 1
|
"total_success": 1
|
||||||
}
|
}
|
||||||
else:
|
|
||||||
return {
|
return {
|
||||||
"success": False,
|
"success": False,
|
||||||
"error": result_data.get('error', '未知错误')
|
"error": result_data.get('error', '未找到图片URL')
|
||||||
}
|
}
|
||||||
else:
|
else:
|
||||||
try:
|
try:
|
||||||
error_data = response.json()
|
error_data = response.json()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user