优化添加背景页面功能逻辑,修复连续上传多张图片导致的换颜色无效的问题

This commit is contained in:
jingrow 2026-01-22 12:57:40 +08:00
parent fc8922eed8
commit 03e62f6029

View File

@ -2218,7 +2218,7 @@ const initializeCanvasWithBackground = async (bgColor: string) => {
// Initialize canvas from saved result (for history items)
const initializeCanvasFromResult = async (item: HistoryItem) => {
if (!canvasRef.value || !item.resultImage) {
if (!canvasRef.value || !item.originalImageUrl) {
processing.value = false
return
}
@ -2237,24 +2237,24 @@ const initializeCanvasFromResult = async (item: HistoryItem) => {
selection: false
})
// Load the result image directly
const resultImg = await FabricImage.fromURL(item.resultImage, {
// Load the ORIGINAL transparent image (not the result)
const img = await FabricImage.fromURL(item.originalImageUrl, {
crossOrigin: 'anonymous'
})
if (!resultImg || !fabricCanvas) {
if (!img || !fabricCanvas) {
processing.value = false
return
}
// Get image natural dimensions
const imgWidth = resultImg.width || 1
const imgHeight = resultImg.height || 1
const imgWidth = img.width || 1
const imgHeight = img.height || 1
// Set canvas to actual image dimensions
fabricCanvas.setDimensions({ width: imgWidth, height: imgHeight })
resultImg.set({
img.set({
left: 0,
top: 0,
selectable: false,
@ -2263,8 +2263,15 @@ const initializeCanvasFromResult = async (item: HistoryItem) => {
scaleY: 1
})
fabricCanvas.add(resultImg)
fabricCanvas.centerObject(resultImg)
// Apply saved background color or leave transparent
if (item.backgroundColor) {
fabricCanvas.backgroundColor = item.backgroundColor
} else {
fabricCanvas.backgroundColor = null
}
fabricCanvas.add(img)
fabricCanvas.centerObject(img)
fabricCanvas.renderAll()
// Adjust visual display size to fit container