展开本页目录
开始前准备什么
- 先下载并解压本题工程，在独立练习目录保留starter、reference和原始输入。
- 本地参考主要需要Python 3与现代桌面浏览器；涉及Chrome扩展、LibreOffice、Git时按本文单独要求准备。
- 目标工具账号、模型额度与平台导入能力由读者另行确认；本文实际运行范围见执行记录，不自动调用付费服务。
- 运行缺陷demo
- 给Cursor提供细线/文字局部截图和固定1200×800的交付要求
- 修复预览内部尺寸与坐标缩放
- 为下载创建独立固定尺寸导出画布
- 在DPR1、2、3环境分别操作、缩放页面并下载PNG
- 用图片解码器读取实际宽高
- 核对预览点击坐标仍正确
2026-10-23 核验材料；实际执行范围、结果与限制见下方记录。
补充：原有练习资料与下载
starter、七步任务、原始输入、人工完成的可运行参考、真实运行结果与独立验收；不含账号、数据库或缓存。
原生账号任务、本地工程运行和官方示例分开说明。
Canvas：三档预览DPR与固定PNG导出
浏览器已真实编码并解码三档预览的PNG，导出均为1200×800。
· 真实浏览器Canvas：模拟预览DPR1/2/3，预览内部尺寸600×400/1200×800/1800×1200；三个实际PNG Blob经Image.decode均1200×800、53686字节，pass:true。真实devicePixelRatio始终1。未执行Cursor会话，浏览器文件保存等待超时，不能声称下载文件已落盘。
已取得下列真实结果；仍有内容质量或功能范围需要按本页检查项复核。
- 运行环境
- 浏览器原生Canvas2D/Image.decode；Cursor未安装；独立练习目录；原创虚构输入；本页未使用apizt测试Key
1. 用HTTP打开真实工程
通过本地HTTP服务打开下载包index.html，不把源码图片当浏览器运行。
2. 切换预览并重复绘制
选择模拟预览DPR1，再点重复绘制3次，每次setTransform重置，避免scale累积。
3. 生成Blob并真实解码
点导出；新建独立1200×800画布绘制，toBlob真实编码PNG，用Image.decode解码实际Blob。
4. 比较三档实际导出像素
再选择模拟DPR2和3，各重复绘制并导出；预览内部像素变化，导出实际像素固定1200×800。
5. 保存结果并标注Cursor边界
保存页面原始JSON及三个PNG，对应截图只标Canvas真实操作；Cursor原生需求提交与会话未执行。
这次实际得到什么
- 模拟预览DPR1、2、3的内部像素分别600×400、1200×800、1800×1200。
- 真实设备devicePixelRatio均1；模拟值和设备值分别记录。
- 三个Blob实际解码均1200×800 PNG、53686字节、pass:true。
- 重复绘制3次不累积transform，最终第12次重绘仍通过。
使用这份结果时注意
- Cursor未安装，未执行Cursor原生会话；这是作者Canvas工程实际浏览器运行。
- 浏览器文件保存等待API超时，仅能确认toBlob及Image.decode成功，不能确认下载文件写入磁盘。
- 模拟DPR不是三种物理设备或三种浏览器设备像素比测试。
1. 运行缺陷demo
运行缺陷demo，记录CSS尺寸、canvas内部尺寸、DPR和下载尺寸。
预览显示300×200，要求导出1200×800。先分清CSS尺寸、内部像素与下载像素，DPR变化不应改变最终交付规格。
2. 给Cursor提供细线/文字局部截图和固定1200×800的交付要求
给Cursor提供细线/文字局部截图和固定1200×800的交付要求。
原图是Canvas绘制的原创贴纸文字和细线，不是低清照片。参考工程会等待document.fonts.ready再绘制。
3. 修复预览内部尺寸与坐标缩放
修复预览内部尺寸与坐标缩放，避免每次重绘累积scale。
每次render使用setTransform重设坐标，避免重复scale使文字越画越大。DPR2下内部600×400但逻辑仍300×200。
4. 为下载创建独立固定尺寸导出画布
为下载创建独立固定尺寸导出画布，等待字体可用后再渲染。
下载时另建1200×800画布并重绘，不截取预览页面，也不按屏幕DPR决定下载尺寸。
5. 在DPR1、2、3环境分别操作、缩放页面并下载PNG
在DPR1、2、3环境分别操作、缩放页面并下载PNG。
分别在DPR1/2/3真实浏览器上下文点击下载，得到三个PNG文件。双击canvas中心应约为逻辑150,100；事件坐标取整允许1像素差。
独立目录练习命令
python3 -m http.server 8073 --directory reference6. 用图片解码器读取实际宽高
用图片解码器读取实际宽高，按相同像素裁切比较细线与中文。
直接解码PNG宽高，不能用DOM宽高推断文件。对中文与细线按同一像素比例检查，不通过拉伸缩略图制造清晰差异。
7. 核对预览点击坐标仍正确
核对预览点击坐标仍正确，保存前后PNG和真实回归日志。
三份实际PNG都应1200×800；重复绘制位置不增长。没有使用超分或生成模型，不把尺寸变大称为恢复原本不存在的细节。
怎样确认已经完成
- 所有DPR下实际下载始终1200×800，不依赖CSS截图尺寸。
- 反复重绘后字号和图形位置不增长；预览点击的标签保持对应位置。
- 中文字体已加载且未裁断，导出PNG可解码；同尺度局部对比无额外缩放伪清晰。
常见问题
AI做的海报在网页上清楚，下载以后为什么发虚？
原图是Canvas绘制的原创贴纸文字和细线，不是低清照片。参考工程会等待document.fonts.ready再绘制。 分别在DPR1/2/3真实浏览器上下文点击下载，得到三个PNG文件。双击canvas中心应约为逻辑150,100；事件坐标取整允许1像素差。
手机高分屏画布怎么既清楚又不把导出尺寸翻倍？
下载时另建1200×800画布并重绘，不截取预览页面，也不按屏幕DPR决定下载尺寸。 三份实际PNG都应1200×800；重复绘制位置不增长。没有使用超分或生成模型，不把尺寸变大称为恢复原本不存在的细节。
下载包哪些内容已实际运行，哪些需要自己在原生工具中验证？
已在DPR1/2/3实际下载并解码1200×800 PNG，重复绘制和逻辑坐标检查通过；Cursor会话未执行。 官方图片只证明所标入口或设置，不是本站原生任务执行截图。