vue/jingrowtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jingrow 2026-01-22 12:57:40 +08:00
parent fc8922eed8
commit 03e62f6029
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/tools/add_background/add_background.vue
View File

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