上传截图后，这里会实时显示美化效果
调任何参数都会立刻重新渲染，预览是缩小图，下载的是原始清晰度。
提示：外边距与圆角按截图短边百分比计算，手机截图和电脑截图套同一组参数，视觉风格保持一致。
截图发在哪里，决定了用什么底色和留白，照着这张表调即可。
| 使用场景 | 背景 | 外边距 | 圆角 | 投影 |
|---|---|---|---|---|
| 公众号 / 文章配图（浅色阅读） | 纯白或浅灰 | 8%~12% | 2%~4% | 轻微 |
| 小红书 / 即刻 / 朋友圈 | 梦幻紫 / 海蓝等渐变 | 10%~16% | 4%~8% | 明显 |
| 产品官网 / 落地页 | 品牌色或深夜色 | 6%~10% | 3%~5% | 明显 |
| 作品集 / 简历附件 | 纯白 | 8% | 2% | 轻微 |
| 深色模式截图展示 | 深夜 / 墨黑渐变 | 8%~12% | 3%~6% | 明显 |
| 演示文稿 / PPT 贴图 | 纯白或自定义底色 | 4%~6% | 2% | 轻微 |
光秃秃的截图和包装过的截图，信息完全一样，但观感差距明显。
| 对比项 | 原始截图 | 美化后 |
|---|---|---|
| 边界 | 四个直角顶到画面边缘，贴在信息流里没有边界感 | 外边距把画面「托」起来，与背景分离 |
| 层次 | 截图和页面底色混在一起，扁平、发闷 | 圆角 + 投影形成悬浮卡片的层次 |
| 氛围 | 白底或黑底，工具味重 | 渐变底色统一色调，有品牌感和设计感 |
| 归属 | 谁都能拿去用 | 角落水印标注来源，防盗用 |
| 信息量 | 完全不变——本工具不缩放、不裁切、不重绘截图内容 | |
⚠️ 免责声明：美化会在截图四周外扩画布并改变输出尺寸，原始截图不会被修改，请自行保留原文件。
请仅对你本人拥有权利的截图进行美化与加水印；水印不具备完整的版权保护效力，重要作品请同时保留原始工程文件与发布时间证据。
导出 JPG 时不支持透明，本工具输出均为不透明背景；选择 JPG / WebP 时以 92% 画质编码，PNG 为无损编码。
所有处理在你的浏览器本地完成，截图不会上传到任何服务器，刷新页面后数据即清除。
同一张 App 截图，直接丢进文章里显得粗糙，套一层底色、加一点留白和阴影，立刻就像出自设计师之手——这件事用 PS 要五分钟，用本工具拖一下滑杆就行。
它的工作方式：
① 按短边算留白：外边距、圆角都按截图短边的百分比计算，手机长截图和电脑宽截图用同一组参数，视觉风格一致，不会出现固定像素留白在大图上太窄、小图上太宽的问题；
② 画布外扩：新建画布 = 原图 + 四周留白（底边因投影向下偏移会再多留一点，防止阴影被裁），截图本身一个像素都不缩放；
③ 绘制背景：纯色预设直接填充，渐变预设沿对角线铺两个品牌色；也可以用取色器指定任意底色；
④ 圆角裁切：画圆角矩形路径并 clip 后再绘制截图，四角圆润；
⑤ 立体投影：轻微 / 明显两档，通过 shadowBlur 与向下偏移让截图像浮在背景上的卡片；
⑥ 文字水印：可在左下 / 居中 / 右下添加署名，透明度可调；白字加一层极淡暗描边，保证在浅底和深底上都能看清；
⑦ 实时预览 + 原清晰度导出：任何参数改动 120ms 内重渲染预览图，预览按容器宽度缩放显示，而下载文件始终按原始像素合成编码，清晰度无损。
典型用法：产品更新公告套品牌渐变底、深色 UI 截图配深夜色底、教程文章统一用浅灰底 + 轻微阴影、小红书分享用高饱和渐变 + 大留白。
整个流程都在你自己的浏览器里完成，截图不会上传到任何服务器。
合成步骤：
① 读取原图实际像素宽高 w × h，取短边 s = min(w, h)；
② 留白 m = round(s × 边距%)，圆角半径 r = round(s × 圆角%)；
③ 建画布 (w + 2m) × (h + 2m + extra)，其中投影档为轻微时 extra = 3%s、明显时 6%s，给向下偏移的阴影留空间；
④ 纯色背景直接 fillRect；渐变背景解析两个十六进制色值，用 createLinearGradient 从左上到右下铺色；
⑤ roundRectPath 自绘圆角矩形路径（兼容不支持 ctx.roundRect 的浏览器），clip 后按投影档位设置 shadowColor / shadowBlur / shadowOffsetY，再 drawImage 原图；
⑥ 有水印文字时按短边 2.2% 计算字号（最小 13px），白色文字叠加淡黑描边，保证深浅底均可读；
⑦ 预览图缩放到容器宽，导出通过 canvas.toBlob 按原像素编码（PNG 无损 / JPG·WebP 92% 画质）。
审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！