按图片短边的百分比计算，所以不同尺寸的照片加出来的框视觉粗细一致。0% = 不加框。
选透明时只做圆角裁切不加底色，导出必须选 PNG / WebP。
透明边框或圆角需要保留透明通道时，必须选 PNG 或 WebP。
选张图，调好框宽与颜色，一键加相框。
不同用途对边框的要求差别很大，照着这张表调基本不出错。
| 场景 | 框宽 | 颜色 | 圆角 | 投影 |
|---|---|---|---|---|
| 小红书 / 朋友圈配图 | 4%~8% | 白色 | 3%~6% | 轻微 |
| 证件照排版 | 2%~4% | 白色 | 0% | 无 |
| 作品集 / 摄影展 | 8%~15% | 纯黑或木色 | 0%~2% | 明显 |
| 商品白底图 | 0%~3% | 白色 | 0% | 无 |
| 头像 / 圆形贴纸 | 6%~10% | 自定义 | 20%~25% | 轻微 |
| 打印装裱 | 12%~20% | 白色 / 木色 | 0% | 无 |
这是加边框最容易做错的一处，也是本工具特意这么设计的原因。
| 做法 | 问题 / 好处 | 结果 |
|---|---|---|
| 固定 40px | 大图上细得看不见，小图上粗得盖住主体 | 批量处理时粗细参差不齐 |
| 短边百分比（本工具） | 始终与画面成固定比例 | 不管原图多大，视觉粗细一致 |
| 圆角也用百分比 | 同理，圆角随图缩放 | 大小图风格统一 |
⚠️ 免责声明：加框会改变图片尺寸，原图不会被修改但也请自行保留。
透明边框与圆角依赖透明通道，输出必须选择 PNG 或 WebP，选 JPEG 时透明区域会被填充为白色。
投影效果只绘制在边框留白区域内，框宽为 0 时投影会被裁掉。
所有处理在你的浏览器本地完成，图片不会上传到任何服务器。
同样是「加个白边」，用 PPT 加会压画质，用手机 App 加会强制带水印，用 PS 加又太重。
这个工具就做一件事：给照片套一个干净的相框，参数全由你定，不加水印、不压画质。
它是怎么加的？
① 按短边算框宽：框宽 = 图片短边 × 百分比，而不是固定多少像素。这一点很关键——固定 40px 在 4000px 的大图上细得看不见，在 400px 的小图上又粗得盖住主体；用百分比才能保证不同尺寸的照片加出来视觉粗细一致；
② 画布外扩：新画布尺寸 = 原图 + 上下左右各一个框宽，原图内容一个像素都不缩放；
③ 铺底色：用你选的颜色填满整个画布（白 / 黑 / 浅灰 / 木色 / 金色 / 自定义 / 透明）；
④ 圆角裁切：按圆角百分比画一个圆角矩形路径，clip() 之后再把图画进去，四个角就变成圆角了，圆角外的部分保持底色或透明；
⑤ 投影：在绘制图片时开启 canvas 阴影（轻微 / 明显两档），让照片看起来浮在框上，而不是贴在框里。
几个常用组合：
· 小红书配图：白框 6% + 圆角 4% + 轻微投影，干净又高级；
· 证件照排版：白框 3% + 圆角 0% + 无投影，符合绝大多数表格要求；
· 摄影作品：黑框或木色 12% + 无圆角 + 明显投影，接近实体相框的观感；
· 头像贴纸：框宽 8% + 圆角 25%，几乎就是圆形。
可以一次选多张批量加框，参数是统一的，所以批量出来的风格完全一致。
整个流程都在你自己的浏览器里跑，照片不会上传到任何服务器。
怎么加：
① 读原图宽高 w / h，取短边 s = min(w, h)；
② 框宽 pad = round(s × 百分比)，圆角半径 r = round(s × 圆角百分比)；
③ 建画布 (w + 2·pad) × (h + 2·pad)；
④ 底色非透明时 fillRect 铺满整块画布；
⑤ 画圆角矩形路径并 clip()，再 drawImage(原图, pad, pad, w, h)；
⑥ 投影档位 > 0 时先设 shadowColor / shadowBlur / shadowOffsetY 再绘制；
⑦ 按原像素导出，原图内容不缩放、不重采样。
它不做：不加水印、不加文字、不做多图拼版、不改原图分辨率。加框后画布尺寸会变大，这是正常的。
审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！