diff --git a/tauri-app/src/hooks/useCoverFabric.ts b/tauri-app/src/hooks/useCoverFabric.ts index dc9fd06..c0916f2 100644 --- a/tauri-app/src/hooks/useCoverFabric.ts +++ b/tauri-app/src/hooks/useCoverFabric.ts @@ -284,14 +284,10 @@ export function useCoverFabric() { await loadCustomFont().catch(() => { }); - // 调整 canvas 内部渲染尺寸以匹配目标分辨率 - if (canvas.width !== targetWidth || canvas.height !== targetHeight) { - canvas.setDimensions( - { width: targetWidth, height: targetHeight }, - { cssOnly: false } - ); - } - + // Canvas 内部渲染尺寸始终保持 1080×1920 不变, + // 通过 resolutionScale 缩放所有元素,避免 Fabric.js 尺寸突变导致文字错乱。 + // CSS 显示尺寸由 initCanvas 固定为 337×600,不受此处影响。 + void targetHeight; // 保留接口兼容性,实际通过 multiplier 在导出时处理高度 const resolutionScale = targetWidth / CANVAS_WIDTH; canvas.clear(); @@ -392,11 +388,12 @@ export function useCoverFabric() { [loadBackground, loadAvatarImage] ); - // 导出 PNG - const exportPng = useCallback((): string => { + // 导出 PNG(通过 multiplier 缩放到目标分辨率) + const exportPng = useCallback((targetWidth?: number): string => { const canvas = fabricCanvasRef.current; if (!canvas) {return '';} - return canvas.toDataURL({ format: 'png', quality: 1, multiplier: 1 }); + const multiplier = (targetWidth ?? CANVAS_WIDTH) / CANVAS_WIDTH; + return canvas.toDataURL({ format: 'png', quality: 1, multiplier }); }, []); // 销毁 diff --git a/tauri-app/src/pages/VideoCreation/CoverDesign.tsx b/tauri-app/src/pages/VideoCreation/CoverDesign.tsx index 9a18a76..18017b9 100644 --- a/tauri-app/src/pages/VideoCreation/CoverDesign.tsx +++ b/tauri-app/src/pages/VideoCreation/CoverDesign.tsx @@ -332,7 +332,7 @@ export default function CoverDesign() { } } - const dataUrl = exportPng(); + const dataUrl = exportPng(videoResolution?.width); if (!dataUrl) { throw new Error('封面设计失败'); }