fix: 封面预览文字截断 — Canvas 内部尺寸保持 1080×1920 不变

- renderCover: 移除动态改变 Canvas 内部尺寸的逻辑,始终用 1080×1920
- renderCover: 仅通过 resolutionScale 缩放元素位置/大小/阴影
- exportPng: 增加 targetWidth 参数,使用 multiplier 缩放到目标分辨率
- CoverDesign: 导出时传入 videoResolution.width,确保 720p/1080p 导出正确
This commit is contained in:
小鱼开发
2026-06-05 17:43:28 +08:00
parent 47bb987e06
commit 4e807525e9
2 changed files with 9 additions and 12 deletions
+8 -11
View File
@@ -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 });
}, []);
// 销毁
@@ -332,7 +332,7 @@ export default function CoverDesign() {
}
}
const dataUrl = exportPng();
const dataUrl = exportPng(videoResolution?.width);
if (!dataUrl) {
throw new Error('封面设计失败');
}