fix: 首页「最近项目」缩略图与退出前视角不一致，出现偏移或裁切 #111

Merged

kdletters merged 8 commits from fix/canva-preview-mismatch into master 2026-07-29 16:09:31 +08:00

Conversation 3 Commits 8 Files Changed 17

+853 -209

k88936 commented 2026-07-24 16:23:09 +08:00

Member

Copy Link

Copy Source

• 封面使用真实画布尺寸及最终 viewport.x/y/scale。
• 320×240 封面改为居中 cover 裁切，不再从左上角取景。
• 正确绘制画布背景色。

in canva:

in home:

因为原本的布局持久化可能有一些bug，改动不相关，所以我回退到最开始的一版：

• 不额外监听画布尺寸变化，给最小尺寸兜底，(大了比小了好)
• 封面不要求强一致性，生成/上传时机仍然按照原来随布局持久化

优化了封面生成：

• 改用webp格式
• 尽量利用图片缓存

最终生成封面从700ms加速到150ms以内， 加上必须的上传和确认150ms 和 布局持久化的时间相差不多，不是特别离谱的手速都能保证两者一致

- 封面使用真实画布尺寸及最终 viewport.x/y/scale。 - 320×240 封面改为居中 cover 裁切，不再从左上角取景。 - 正确绘制画布背景色。 in canva:   in home:   因为原本的布局持久化可能有一些bug，改动不相关，所以我回退到最开始的一版： - 不额外监听画布尺寸变化，给最小尺寸兜底，(大了比小了好) - 封面不要求强一致性，生成/上传时机仍然按照原来随布局持久化 优化了封面生成： - 改用webp格式 - 尽量利用图片缓存 最终生成封面从700ms加速到150ms以内， 加上必须的上传和确认150ms 和 布局持久化的时间相差不多，不是特别离谱的手速都能保证两者一致

shotmd-1784876211.jpg

11 KiB

shotmd-1784874081.jpg

315 KiB

shotmd-1784876202.jpg

309 KiB

shotmd-1784874090.jpg

12 KiB

k88936 marked the pull request as ready for review 2026-07-24 17:15:29 +08:00

kdletters added this to the 美术画布 project 2026-07-24 20:17:59 +08:00

k88936 was assigned by kdletters 2026-07-24 20:23:19 +08:00

kdletters requested changes 2026-07-24 20:52:53 +08:00

Dismissed

kdletters left a comment

Member

Copy Link

Copy Source

[P1] 返回项目页前没有 flush 防抖保存和封面上传

相关位置：

• src/components/image-editor/useImageCanvasProjectPersistence.ts:605-611
• src/components/image-editor/useImageCanvasProjectPersistence.ts:854-863
• src/components/image-editor/ImageCanvasTopbarView.tsx:106-113

当前视口、图层或背景变化后，封面与布局要等待 450ms 才开始处理；组件卸载时又直接清除计时器。顶部返回按钮还是普通的：

  <a href="/project">

会触发整页导航。因此以下流程仍会复现旧封面：

1. 平移或缩放画布；
2. 立即点击左上角返回；
3. 防抖计时器被清除，或者图片加载、OSS 上传、资源创建尚未完成；
4. 项目页读取到上一次封面。

即使已经超过 450ms，只要异步栅格化或上传尚未结束，整页导航也可能中断请求。这个问题直接影响 PR 标题所说的“退出前视角”。

建议：

• 让封面持久化返回可等待的 Promise；
• 对“返回项目页”增加受控导航，先 flush 最新布局与封面，至少等本地 IndexedDB 封面写入完成，再跳转；
• 增加回归测试：修改 viewport 后不推进 450ms，直接触发返回/卸载，断言最新封面仍被生成并保存。

### [P1] 返回项目页前没有 flush 防抖保存和封面上传 相关位置： - src/components/image-editor/useImageCanvasProjectPersistence.ts:605-611 - src/components/image-editor/useImageCanvasProjectPersistence.ts:854-863 - src/components/image-editor/ImageCanvasTopbarView.tsx:106-113 当前视口、图层或背景变化后，封面与布局要等待 450ms 才开始处理；组件卸载时又直接清除计时器。顶部返回按钮还是普通的： ```tsx <a href="/project"> ``` 会触发整页导航。因此以下流程仍会复现旧封面： 1. 平移或缩放画布； 2. 立即点击左上角返回； 3. 防抖计时器被清除，或者图片加载、OSS 上传、资源创建尚未完成； 4. 项目页读取到上一次封面。 即使已经超过 450ms，只要异步栅格化或上传尚未结束，整页导航也可能中断请求。这个问题直接影响 PR 标题所说的“退出前视角”。 建议： - 让封面持久化返回可等待的 Promise； - 对“返回项目页”增加受控导航，先 flush 最新布局与封面，至少等本地 IndexedDB 封面写入完成，再跳转； - 增加回归测试：修改 viewport 后不推进 450ms，直接触发返回/卸载，断言最新封面仍被生成并保存。

k88936 requested review from kdletters 2026-07-27 19:44:21 +08:00

k88936 marked the pull request as work in progress 2026-07-29 10:25:43 +08:00

k88936 marked the pull request as ready for review 2026-07-29 10:56:05 +08:00

k88936 marked the pull request as work in progress 2026-07-29 11:08:56 +08:00

k88936 added 3 commits 2026-07-29 11:36:11 +08:00

fix: 首页「最近项目」缩略图与退出前视角不一致，出现偏移或裁切 ... 23e2d099ff

- 封面使用真实画布尺寸(clientWidth/Height)及最终 viewport.x/y/scale。
- 320×240 封面改为居中 cover 裁切，不再从左上角取景。
- 正确绘制画布背景色。

复用画布尺寸状态生成项目封面 ... 08cda72ea0

由 ResizeObserver 维护的 canvasSize 传入项目持久化 hook
移除持久化层对 canvasViewportRef 和 clientWidth/clientHeight 的直接读取
更新持久化测试夹具并保持封面尺寸断言

扩展封面视口生成逻辑，确保最小取景范围为 1280x960 且居中裁切 f71e7607c7

k88936 force-pushed fix/canva-preview-mismatch from 1f483246d2 to f71e7607c7 2026-07-29 11:36:11 +08:00 Compare

k88936 added 1 commit 2026-07-29 11:38:01 +08:00

Merge remote-tracking branch 'origin/master' into fix/canva-preview-mismatch b82a856bc2

k88936 commented 2026-07-29 11:55:39 +08:00

Author

Member

Copy Link

Copy Source

因为原本的布局持久化可能有一些bug，改动不相关，所以我回退到最开始的一版：

• 不额外监听画布尺寸变化，给最小尺寸兜底，(大了比小了好)
• 封面不要求强一致性，生成/上传时机仍然按照原来随布局持久化

优化了封面生成：

• 改用webp格式
• 尽量利用图片缓存

最终生成封面从700ms加速到150ms以内， 加上必须的上传和确认150ms 和 布局持久化的时间相差不多，不是特别离谱的手速都能保证两者一致:

因为原本的布局持久化可能有一些bug，改动不相关，所以我回退到最开始的一版： - 不额外监听画布尺寸变化，给最小尺寸兜底，(大了比小了好) - 封面不要求强一致性，生成/上传时机仍然按照原来随布局持久化 优化了封面生成： - 改用webp格式 - 尽量利用图片缓存 最终生成封面从700ms加速到150ms以内， 加上必须的上传和确认150ms 和 布局持久化的时间相差不多，不是特别离谱的手速都能保证两者一致: <video src="attachments/dffb9a0e-d0bb-4e7f-ad2c-d06694417f7b" title="2026-07-29 14-26-25.mp4" controls></video>

2026-07-29 14-26-25.mp4

3.7 MiB

🚀 1

k88936 marked the pull request as ready for review 2026-07-29 11:55:53 +08:00

k88936 added 2 commits 2026-07-29 14:30:50 +08:00

Refactor project cover snapshot handling into a dedicated renderer, ensuring efficient layer filtering, caching, and concurrent image loading. 08a251150f

Merge remote-tracking branch 'origin/master' into fix/canva-preview-mismatch ... 4a894fd332

# Conflicts:
#	src/components/image-editor/useImageCanvasProjectPersistence.test.tsx

k88936 added 1 commit 2026-07-29 15:00:46 +08:00

fix merge error c826aa0f41

kdletters added 1 commit 2026-07-29 15:59:55 +08:00

修复画布返回前封面持久化 ... 2ced33a232

返回项目页前立即刷新并等待权威画布布局保存
等待本地封面缓存、OSS 上传和项目资源创建完成
离屏视口生成纯背景封面并补充回归测试
同步图片画布封面技术文档和共享记忆

kdletters scheduled this pull request to auto merge when all checks succeed 2026-07-29 16:09:15 +08:00

kdletters approved these changes 2026-07-29 16:09:29 +08:00

kdletters merged commit 6ee33dc561 into master 2026-07-29 16:09:31 +08:00

kdletters deleted branch fix/canva-preview-mismatch 2026-07-29 16:09:31 +08:00

Sign in to join this conversation.

Reviewers

No Reviewers

kdletters

Labels

Clear labels

Compat/Breaking

Breaking change that won't be backward compatible

Kind/Bug

Something is not working

Kind/Documentation

Documentation changes

Kind/Enhancement

Improve existing functionality

Kind/Feature

New functionality

Kind/Security

This is security issue

Kind/Testing

Issue or pull request related to testing

Priority

Critical

1

The priority is critical

Priority

High

2

The priority is high

Priority

Low

4

The priority is low

Priority

Medium

3

The priority is medium

Reviewed

Confirmed

1

Issue has been confirmed

Reviewed

Duplicate

2

This issue or pull request already exists

Reviewed

Invalid

3

Invalid issue

Reviewed

Won't Fix

3

This issue won't be fixed

Status

Abandoned

3

Somebody has started to work on this but abandoned work

Status

Blocked

1

Something is blocking this issue or pull request

Status

Need More Info

2

Feedback is required to reproduce issue or to continue work

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project 美术画布

Assignees

Clear assignees

HuangJiaJia JenkenB k88936 (王德宇) kdletters (段舒康) laura2008 (王乐) lhk229 (孔令弘) Loer (农洛儿) loong suzmii (董羽秦) taobaisu (叶东旭) wuxiangwanzi (王子民) YixuanLiu ziyu

No Assignees k88936

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GenarrativeAI/Genarrative#111