展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查；执行Stitch需要可访问账号和已配置的官方MCP或SDK，云端额度/计划以账户页面为准。
- 在隔离练习项目操作，保留projectId、screenId和版本；本稿未调用目标云端，不能据此声称生成完成。
- 准备两类媒体
- 固定视口和状态
- 使用快照脚本
- 检查资源内联
- 断开本地服务复查
- 比对图表数据
- 交付静态输入
1. 准备两类媒体
本地样本放一张带srcset的活动图和一个canvas柱图。
为二者记录实际像素和文字说明，不把纯色占位块当图表。
2. 固定视口和状态
选择1280x800、筛选项“本周”，等待图片加载。
截图状态和保存状态必须相同，避免快照拿到默认空图。
3. 使用快照脚本
读取官方extract-static-html的snapshot.ts参数，指定输出文件。
canvas需启用--inline-canvas，普通DOM提取不会自动保存canvas像素。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 检查资源内联
检查img src与srcset、source srcset是否已内联或清除失效项。
保留一个故意未内联的负例，看浏览器是否退回错误网络地址。
5. 断开本地服务复查
只在作者练习副本停止服务后打开standalone.html。
外部字体可能仍依赖网络，单独记录，不能一概宣称所有资源全离线。
6. 比对图表数据
将快照中的三根柱子与原始值12、18、9对应。
图像保留不代表图表仍可交互或筛选，应明确静态边界。
7. 交付静态输入
保存HTML、资源检查表和在线/断开服务对照。
后续上传Stitch需另行实际执行，不把文件生成等同云端导入成功。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 停止服务后图片和canvas柱图仍显示。
- srcset无死链覆盖已内联src。
- 静态图表不冒充可交互图表。
常见问题
HTML保存了，为什么换台电脑图片没了？
固定视口和筛选状态，按当前 extract-static-html 脚本捕获 srcset 图片与 canvas。查看是否内联实际图像，断开原服务后打开快照检查缺图；普通保存 HTML 不保证所有动态资源自包含。
快照里的柱图还能筛选吗？
通常只是静态视觉输入。脚本会移除运行时脚本，canvas也转成图片；交互需要另外实现，不能从图像存在推断功能仍在。