xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 2 Actions Packages Projects Releases 7 Wiki Activity

fix: Canvas预览与后端ASS渲染坐标系对齐,消除标题预览不一致 #1401

Closed
xiaoxia wants to merge 1 commits from fix/canvas-video-resolution-match into develop
pull from: fix/canvas-video-resolution-match
merge into: xiaoxia:develop
Conversation 4 Commits 1 Files Changed 3
+122 -50

1 Commits

Author SHA1 Message Date
灵应 a2cebdec9c fix: Canvas预览与后端ASS渲染坐标系对齐,消除标题预览不一致
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 41s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m28s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m30s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m46s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m10s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m47s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m9s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m56s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m35s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 5m4s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 6s
Details
AI Code Review / AI Code Review (pull_request) Failing after 6m0s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Failing after 0s
Details 
根因：Canvas以CSS像素(容器~300x533px)绘制，后端以视频分辨率(1280x720)
渲染ASS字幕，同一font_size=36在两个坐标系中比例完全不同。

修复：
- drawTitleOnCanvas 新增 videoWidth/videoHeight 参数，在视频分辨率下绘制
- 新增 calculateVideoDimensions() 根据 videoRatio 计算目标分辨率
- TitlePreviewCanvas 以视频分辨率绘制 Canvas，CSS 缩放至容器大小
- PreviewVideoPanel 叠加 Canvas 同样以视频分辨率绘制

效果：font_size / paddingX / topOffset 在 Canvas 和 ASS 中视觉比例完全一致，
Step4 预览效果与 Step5 生成的视频标题 100% 匹配。
 2026-08-17 13:11:38 +08:00