添加背景页面切换缩略图时自动记住已经添加的背景颜色
This commit is contained in:
parent
cfc3e13b38
commit
6243cb6413
@ -669,7 +669,90 @@ const selectHistoryItem = async (index: number) => {
|
|||||||
await cacheResultImage(item.resultImage)
|
await cacheResultImage(item.resultImage)
|
||||||
}
|
}
|
||||||
|
|
||||||
await initializeCanvas()
|
// Initialize canvas and apply saved background color
|
||||||
|
await initializeCanvasWithBackground(item.backgroundColor)
|
||||||
|
}
|
||||||
|
|
||||||
|
const initializeCanvasWithBackground = async (bgColor: string) => {
|
||||||
|
if (!canvasRef.value || !uploadedImageUrl.value) {
|
||||||
|
processing.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await nextTick()
|
||||||
|
|
||||||
|
// Clean up old canvas
|
||||||
|
if (fabricCanvas) {
|
||||||
|
fabricCanvas.dispose()
|
||||||
|
fabricCanvas = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new fabric canvas
|
||||||
|
fabricCanvas = new Canvas(canvasRef.value, {
|
||||||
|
selection: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// Load image using fabric v7 API
|
||||||
|
const img = await FabricImage.fromURL(uploadedImageUrl.value, {
|
||||||
|
crossOrigin: 'anonymous'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!img || !fabricCanvas) {
|
||||||
|
processing.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const previewSection = canvasRef.value?.closest('.preview-section') as HTMLElement
|
||||||
|
if (!previewSection) {
|
||||||
|
processing.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const previewRect = previewSection.getBoundingClientRect()
|
||||||
|
const padding = 100
|
||||||
|
const maxAvailableWidth = Math.max(400, previewRect.width - padding)
|
||||||
|
const maxAvailableHeight = Math.max(400, previewRect.height - 300)
|
||||||
|
|
||||||
|
const imgWidth = img.width || 1
|
||||||
|
const imgHeight = img.height || 1
|
||||||
|
|
||||||
|
const scale = Math.min(
|
||||||
|
maxAvailableWidth / imgWidth,
|
||||||
|
maxAvailableHeight / imgHeight,
|
||||||
|
1
|
||||||
|
)
|
||||||
|
|
||||||
|
img.scale(scale)
|
||||||
|
|
||||||
|
const canvasWidth = img.getScaledWidth()
|
||||||
|
const canvasHeight = img.getScaledHeight()
|
||||||
|
|
||||||
|
// Use setDimensions for fabric v7
|
||||||
|
fabricCanvas.setDimensions({ width: canvasWidth, height: canvasHeight })
|
||||||
|
|
||||||
|
img.set({
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
selectable: false,
|
||||||
|
evented: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// Apply saved background color if provided
|
||||||
|
if (bgColor) {
|
||||||
|
fabricCanvas.backgroundColor = bgColor
|
||||||
|
}
|
||||||
|
|
||||||
|
fabricCanvas.add(img)
|
||||||
|
fabricCanvas.centerObject(img)
|
||||||
|
fabricCanvas.renderAll()
|
||||||
|
|
||||||
|
processing.value = false
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Canvas initialization error:', error)
|
||||||
|
message.error(t('Failed to load image'))
|
||||||
|
processing.value = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const getHistoryThumbnailUrl = (item: HistoryItem): string => {
|
const getHistoryThumbnailUrl = (item: HistoryItem): string => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user