截图美化与展示图

截图美化

用几何模型推演纯色/渐变背景、边距、圆角、阴影与透明图合成策略；核对同一图在不同边距/圆角下预览与导出的图层一致性。输出确定性 JSON 计划，不生成图片字节。

在浏览器中运行

输入与参数

• spec — 几何 / 图层模型 JSON
• scale — 导出倍率
• backgroundPreset — 切换背景（不重置输入/裁剪）
• frameAssetStatus — 框素材加载状态
• clipboardMode — 输入场景（粘贴 / 选文件回退）
• format — 输出格式（计划中的格式字段）

真实示例

{"image":{"id":"shot-01","width":1280,"height":800,"bytes":245760,"hasAlpha":true,"format":"png"},"crop":{"x":0,"y":0,"width":1280,"height":800},"padding":48,"radius":20,"background":{"kind":"gradient","from":"#E8F3EC","to":"#F7F8F5","alpha":1},"shadow":{"blur":24,"offsetY":12,"alpha":0.18},"frame":{"kind":"browser","assetStatus":"ok"},"preset":"auto","format":"png","scale":1,"clipboardMode":"desktop-paste"}
（1280×800 透明 PNG；padding=48；radius=20；浏览器框；scale=1）
→ 设计画布 1400×952；预览 1200×816；导出 1x = 1400×952（1,332,800 px）、2x = 2800×1904（5,331,200 px）；预览签名 === 导出签名；transparentBlackEdge=false；composite.steps 以 clearRect(rgba(0,0,0,0)) 开始；downloadableImage=false；文件名 shot-beautify-<时间戳>.json。

限制与失败处理

不解码真实 File/Blob、不创建 Canvas 2D 上下文、不编码 PNG/WebP/JPEG；输入上限 15MiB/16MP，导出上限 64MP/单边 16384px，超限在分配画布前报 EXPORT_PIXEL_LIMIT 或 CANVAS_SIDE_LIMIT；只提供 1x/2x；真实渲染导出未实测。

FAQ