截图美化与展示图

浏览器 / 设备框

用 CSS 式几何描述浏览器框（顶栏 44px、其余 12px），设备框需授权素材；加载失败、缺失、仍在加载或未获授权时降级为可导出的无框版，绝不返回空白画布。

在浏览器中运行

输入与参数

• spec — 几何 / 图层模型 JSON
• scale — 导出倍率
• frameAssetStatus — 框素材加载状态
• backgroundPreset — 切换背景（不重置输入/裁剪）
• 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":"failed"},"preset":"auto","format":"png","scale":1,"clipboardMode":"desktop-paste"}
（frame.kind=browser，frame.assetStatus=failed）
→ frameFallback={applied:false, reason:"FRAME_ASSET_FAILED", exportable:true, fallback:"frameless"}；chrome 全 0；图层列表无 frame 层；设计画布 1376×896；预览 1200×781；导出 1x 1376×896、2x 2752×1792；仍返回完整合成策略与 JSON 计划。

限制与失败处理

仅几何框与降级语义，无真实框素材文件；设备框未获授权不加入；真实图片加载、失败重试与浏览器内绘制未实测；其余输入/导出预算同 beautify。

FAQ