fix: 封面预览文字截断 — Canvas 内部尺寸保持 1080×1920 不变
- renderCover: 移除动态改变 Canvas 内部尺寸的逻辑,始终用 1080×1920 - renderCover: 仅通过 resolutionScale 缩放元素位置/大小/阴影 - exportPng: 增加 targetWidth 参数,使用 multiplier 缩放到目标分辨率 - CoverDesign: 导出时传入 videoResolution.width,确保 720p/1080p 导出正确
This commit is contained in:
@@ -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('封面设计失败');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user