图片加边框 / 相框：在线加白边黑边圆角阴影，免费不上传
🏠 首页
›
工具箱
›
图片加边框
🖼️ 选择图片
🖼️
点击选择，或把图片拖到这里
支持 JPG / PNG / WebP，可一次选多张批量加框
边框宽度
6%
按图片短边的百分比计算，所以不同尺寸的照片加出来的框视觉粗细一致。0% = 不加框。
圆角
4%
投影
无
轻微
明显
边框颜色
选透明时只做圆角裁切不加底色，导出必须选 PNG / WebP。
输出格式
JPEG（体积小，推荐）
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%，几乎就是圆形。可以一次选多张批量加框，参数是统一的，所以批量出来的风格完全一致。整个流程都在你自己的浏览器里跑，照片不会上传到任何服务器。
类别图片处理
可调参数框宽 / 圆角 / 投影 / 颜色
输出格式JPEG / PNG / WebP
运行方式纯前端本地，不上传
简介
玩法说明
更新记录
常见问题
留言
核心特性
按短边百分比加框
6 种预设色
自定义颜色
圆角 0~25%
三档投影
透明边框
批量处理
ZIP 打包
关于这个工具
怎么加：① 读原图宽高 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 再绘制；⑦ 按原像素导出，原图内容不缩放、不重采样。它不做：不加水印、不加文字、不做多图拼版、不改原图分辨率。加框后画布尺寸会变大，这是正常的。
怎么用
第 1 步点击或拖拽选择图片，可以一次选多张。
第 2 步拖「边框宽度」滑杆定粗细，小红书配图一般 4%~8%。
第 3 步调圆角与投影档位。
第 4 步选边框颜色，需要透明就选「透明」并配 PNG 输出。
第 5 步点「🖼️ 开始加框」，结果区逐张预览并下载或打包。
更新记录
v1.0
2026-09-21
工具正式上线：按短边百分比计算框宽（0~20%）与圆角（0~25%），内置白 / 黑 / 浅灰 / 木色 / 金色 / 透明六种预设并支持自定义颜色，提供无 / 轻微 / 明显三档投影，支持批量处理、输出 JPEG / PNG / WebP 与 ZIP 打包；附场景参数表与百分比设计说明。全程浏览器本地处理，图片不上传，适配黑夜模式。
常见问题
加框后图片尺寸变大了，正常吗？
正常，而且必然如此。加边框是在原图四周外扩一块画布，所以输出尺寸 = 原图 + 上下左右各一个框宽。比如 1000×800 的图加 6% 的框（短边 800 × 6% = 48px），输出就是 1096×896。本工具不会缩放原图内容，画面本身一个像素都没动，清晰度完全保留。如果你需要固定输出尺寸（比如统一 1080×1080），建议加完框后用「图片改尺寸」再处理一次。
为什么透明边框导出后变成白色了？
因为输出格式选了 JPEG。JPEG 格式不支持透明通道，浏览器在编码时会把透明像素填成白色。解决：边框颜色选「透明」时，输出格式必须选 PNG（或 WebP）。同样的道理，圆角想保留透明角也必须走 PNG / WebP，否则圆角外会被填白——看起来就像没加圆角一样。
框宽设成 0 时投影怎么没了？
因为投影是画在边框留白区域里的。canvas 的阴影由 shadowBlur 产生，它会向外扩散，但超出画布的部分会被直接裁掉——框宽为 0 时画布与原图一样大，阴影完全没有地方可画。想要投影效果：框宽至少给到 5% 以上，再选「轻微」或「明显」。
批量加框的风格会一致吗？
会一致，这正是用百分比而非固定像素的好处。框宽、圆角都按每张图自己的短边计算，所以 4000px 的大图和 800px 的小图加出来的框在画面中占的比例完全相同，肉眼看就是同一种风格。反之如果用固定 40px，大图上细如发丝、小图上粗得像框中框，批量导出后放在一起看会很乱。
我的照片会被上传吗？
不会。选图、加框、导出全部在你自己的浏览器里用 canvas 完成，照片不会上传到任何服务器，页面刷新后数据即清除。
💬 留言板 0
全部留言需审核通过后展示
💬
还没有留言，来抢沙发吧！
✍️ 说点什么
游客留言，登录 可关联账号
0 / 500
📨 提交留言
🎉
留言已提交！
审核通过后就会展示在留言板上，稍安勿躁～
再留一条
🔗 相关工具推荐
🎞️
图片黑白 / 怀旧黑白照配相框更出片
→
📐
图片改尺寸加完框统一输出尺寸
→
💧
图片加水印作品集加个署名
→
🧰
图片工具箱更多图片处理合集
→