截图美化
给截图加背景、内边距、圆角、阴影、设备外框与标题水印，实时 Canvas 预览并导出 PNG。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
图片只在本地处理，不会上传。
还没有选择截图
阴影
0 px
24 px
48 px
0.35
预览
输出信息
这个工具能做什么
- 发博客、写文档或做产品页时给截图套一层渐变背景和圆角阴影，让图片看起来不像随手截的。
- 给 App 截图加设备外框，模拟真机效果，比直接贴原图更像成品图。
- 统一一批截图的留白与圆角尺寸，让同一篇文章里的图片风格一致。
- 加一句站点水印（例如 unikit.cc），防止截图被转发后看不出出处。
示例
输入
1280 × 800 的截图，内边距 40 px，圆角 16 px，背景 sky，无外框，无标题，阴影 0/24/48 不透明度 0.35
输出
画布尺寸 1360 × 880；背景 linear-gradient(#38bdf8, #6366f1)；圆角 16 px；阴影 rgba(15, 23, 42, 0.35)；导出文件名 screen shot-beautified.png
画布尺寸按「内边距 × 2 + 原图尺寸」计算：40 × 2 + 1280 = 1360、40 × 2 + 800 = 880。标题留空时不预留 40 px 的标题块，加了标题才会再高 40 px。
常见问题
图片会被上传到服务器吗？
不会。图片用 createImageBitmap 读进内存，绘制在页面里的 Canvas 上，导出走 canvas.toBlob，整个过程没有任何网络请求，断网也能用。
为什么导出后是 PNG，不能选 JPG？
目前只导出 PNG。PNG 支持透明通道，配合「透明」背景预设可以做出无底色的悬浮截图；JPG 会把透明区域填成黑或白，反而破坏效果。要压体积可以用图片压缩工具再处理一遍。
加了设备外框但看不出效果？
外框是画在图片外围的一圈纯色边（默认 #cbd5e1），需要把「外框粗细」调到十几像素以上、同时保持内边距足够大才明显。外框颜色可以改成任意 #RGB 或 #RRGGBB。
内边距和圆角填了负数会怎样？
会提示「内边距不能是负数」或「圆角不能是负数」并停止渲染。圆角还会被自动限制在短边的一半以内，避免出现画不出来的形状。
支持哪些图片格式？
只要浏览器能解码就行，PNG、JPEG、WebP、GIF（只取第一帧）都可以。超大图片会占用较多内存，建议先缩到 4000 px 以内再处理。
关键词：screenshot beautifier截图美化截图加背景shadow圆角device framepng背景渐变