证件照换底色
周一上午要交白底一寸照,翻出以前的蓝底电子版,用手机修图软件抠图边缘全是锯齿。把照片拖进工具,选「实色」模式,取色器点一下原图白色区域,色值自动锁定为 #FFFFFF,边缘柔化调至 2 像素,导出后发到打印店直接过机,没出现白边晕染。
支持 JPG · PNG · WebP · GIF · BMP · AVIF · 可多选批量 · 单张 ≤ 50MB
截图直接 CtrlV 粘贴
一张产品图、一张证件照,加个边框就能从“随手拍”变成“可用素材”。这个工具让用户给图片套上实色、阴影或装饰边框,调整边距和圆角,几秒内得到可以直接用于电商详情页、简历或社交封面的输出。所有处理在浏览器本地完成,图片不上传服务器——敏感证件、未公开设计稿都可以放心使用。
周一上午要交白底一寸照,翻出以前的蓝底电子版,用手机修图软件抠图边缘全是锯齿。把照片拖进工具,选「实色」模式,取色器点一下原图白色区域,色值自动锁定为 #FFFFFF,边缘柔化调至 2 像素,导出后发到打印店直接过机,没出现白边晕染。
闲鱼卖二手镜头,买家总问「镜片有没有划痕」。把镜头正面照拖进来,选「阴影」边框,宽度设为 15 像素,透明度 40%,偏移方向右下。阴影压暗了镜片反光,划痕反而显出来,买家看到图直接拍下,省去反复拍照解释的功夫。
打印 50 张旅行照片贴手账,每张尺寸不一、构图杂乱。全部选中批量导入,统一加 8 像素宽「装饰」边框——圆角虚线样式,颜色选暖灰 #D4C5A9。贴完后整本手账的留白和照片边缘齐整,像印刷品,不用再拿剪刀裁白边。
给客户发方案 PDF,里面插了十几张软件界面截图,白底接白底,分不清边界。每张截图套 3 像素「实色」深蓝边框 #2B579A,再叠加 5 像素「阴影」偏移右下。客户翻页时每张截图像浮在纸面上,方案专业度明显提升。
用手机拍了 4 张长桌的局部图,在 PS 里拼成全景图,但拼接处有 1 像素的亮线。把拼接图导入工具,选「装饰」边框——内阴影样式,宽度 1 像素,颜色取相邻区域的平均色 #E8E0D6。亮线被内阴影覆盖,看起来像自然过渡的接缝。
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传一张 800×600 的纯色图片,选择实色边框(颜色 #FF0000,宽度 10px) | 输出图片:800×620(上下各加 10px 实色红边框) | 常规:验证实色边框的基础功能,边框宽度正确叠加到图片尺寸上 |
| 上传一张 200×200 的图片,选择阴影边框(偏移 5px,模糊 8px,颜色 #000000) | 输出图片:200×200 原图,右侧和下方各延伸 5px 阴影区域,阴影边缘模糊过渡 | 常规:阴影边框不改变原图尺寸,仅扩展画布容纳阴影效果 |
| 上传一张 50×50 的图片,选择装饰边框(花边样式,宽度 20px) | 输出图片:90×90(边框宽度 20px 导致画布扩大至 90×90,花边图案在四边重复平铺) | 边界:极小图片,装饰边框宽度大于图片本身,验证边框渲染是否变形或溢出 |
| 上传一张 10000×1 的图片,选择实色边框(颜色 #00FF00,宽度 5px) | 输出图片:10010×11(上下边框 5px,左右边框 5px,但图片高度仅 1px,边框几乎覆盖原图) | 边界:极端宽高比(10000:1),验证工具对非正方形图片的边框处理是否按比例正确 |
| 上传一张 1920×1080 的图片,选择阴影边框(偏移 0px,模糊 0px,颜色 #888888) | 输出图片:1920×1080 原图,无可见阴影(偏移和模糊均为 0 时阴影不可见) | 边界:阴影参数全零,验证工具是否输出原图而不报错或添加不可见区域 |
| 上传一张 300×300 的图片,选择实色边框(颜色 #FFFFFF,宽度 -5px) | 输出错误提示:边框宽度必须为正整数 | 易错:用户误输入负数宽度,工具应友好提示而非静默处理或崩溃 |
| 上传一张 100×100 的图片,选择装饰边框(样式:虚线,宽度 10px),同时勾选「保留原图尺寸」选项 | 输出图片:100×100(边框绘制在原图边界内,原图内容被边框覆盖 10px 边缘) | 易错:保留原图尺寸时边框向内绘制,用户可能误以为边框会向外扩展导致内容丢失 |
1.透明背景 PNG 加实色边框后边缘出现白边
直接对透明 PNG 添加 2px 实色红色边框先对图片执行「去杂边」或「裁剪透明像素」操作,再添加边框PNG 透明区域边缘常残留半透明像素,实色边框会与这些像素混合,产生锯齿状白边。去杂边能消除半透明像素,保证边框干净。
2.阴影边框偏移方向理解反了
设置阴影偏移 X=5、Y=5,期望阴影在右下角X 正数向右偏移,Y 正数向下偏移,所以 X=5、Y=5 阴影在右下角阴影偏移遵循 CSS box-shadow 坐标系:X 向右为正,Y 向下为正。若想阴影在左上角,需设 X=-5、Y=-5。
3.装饰边框与图片内容重叠导致遮挡
给一张边角有重要文字的图片添加 30px 宽的装饰花纹边框先确认装饰边框是「外扩模式」(边框在图片外侧扩展),而非「内嵌模式」部分工具默认装饰边框在图片内部绘制,会覆盖图片边缘内容。应选择「外扩」模式,让边框在图片外围扩展,不遮挡原图。
4.阴影模糊半径设为 0 却看不到阴影
阴影偏移 X=10、Y=10,模糊半径=0,期望看到清晰阴影模糊半径至少设为 1px,或使用「硬阴影」模式(偏移+无模糊)模糊半径=0 时阴影边缘完全锐利,与偏移后的原图边缘重合,视觉上几乎看不到阴影。模糊半径控制阴影边缘过渡,必须 >0 才有可见阴影。
5.边框颜色与图片背景色相近导致边框不可见
给白色背景的图片添加白色实色边框选择与图片背景色有明显对比的边框颜色,或启用「边框阴影」辅助区分边框颜色与图片背景色相同或相近时,边框与图片边缘融合,视觉上消失。建议使用互补色或深色边框,或同时添加阴影增强层次。
6.装饰边框的重复平铺导致图案断裂
使用 50px 宽的重复花纹边框,但图片宽度不是 50 的整数倍选择「自适应缩放」模式,或手动调整边框宽度使图案完整重复平铺的装饰图案从图片左上角开始排列,若图片尺寸不是图案宽度的整数倍,边缘会出现截断的半个图案,视觉上不完整。
边框总宽度 = 内边距 + 边框厚度 × 2 + 阴影偏移量(绝对值)
内边距内容区到边框内侧的距离(像素)边框厚度实色或装饰边框的线宽(像素)阴影偏移量阴影在 X 或 Y 方向的最大位移(像素,取绝对值)内边距 10px、边框厚度 3px、阴影向右偏移 5px 且向下偏移 5px:边框总宽度 = 10 + 3×2 + 5 = 21px,总高度 = 10 + 3×2 + 5 = 21px。
本工具完全在浏览器本地运行(FE 实现),不依赖服务器处理。处理大图(如 4000×3000 像素以上)时,卡顿主要取决于设备内存和浏览器性能。建议上传前将图片尺寸缩放到 2000 像素以内(长边),或先用工具自带的压缩功能降低分辨率。如果浏览器标签页崩溃,可尝试分次处理或换用 Chrome/Edge 最新版。
阴影边框的模糊半径会向外扩展,如果原图本身边缘不透明(如 PNG 的透明背景),阴影会正常投射在透明区域上。白边通常出现在 JPEG 图片上,因为 JPEG 压缩后边缘像素颜色过渡不均匀。解决方法:先给图片加一层 1-2 像素的实色内边框(颜色与阴影相近),再叠加阴影边框,可掩盖锯齿。
目前装饰边框的图案是预设的矢量样式,不支持单独更改花纹本身的颜色。但可以通过调整边框整体颜色(如深色花纹配浅色背景)来间接改变视觉效果。如果需求是特定颜色或图案,建议先用本工具生成基础边框后,再导入 Photoshop 或 Canva 叠加自定义素材。
预览时浏览器会对图片做色彩管理(sRGB),但保存时部分浏览器(如旧版 Safari)可能未嵌入 ICC 色彩配置文件,导致在其他软件中显示偏色。解决方法:保存时选择 PNG 格式(比 JPEG 更稳定保留颜色信息),并在保存前确认浏览器显示模式不是「高对比度」或「夜间模式」。
本工具支持 GIF 格式输入,但处理逻辑是提取 GIF 的第一帧作为静态图加边框,输出为静态 PNG/JPEG。如果保留动效,需用专业动图编辑软件(如 Photoshop 逐帧处理)或后端 FFmpeg 方案的工具。本工具定位是快速生成静态带边框图片,适合缩略图、封面图场景。
边框宽度设为 0 时,理论上不绘制边框。如果仍看到细线,通常是预览渲染时浏览器对 canvas 边缘的抗锯齿残留(约 1 像素)。实际保存的图片中这条线不会存在。可在预览时放大到 200% 确认,或直接保存到本地后查看原图。
手机相册的边框通常只有几种固定比例和颜色(如正方形白边),且无法精确控制像素宽度。本工具支持实色、阴影、装饰三类边框,宽度可精确到 1 像素,颜色支持十六进制或取色器选择。适合需要统一批量加水印边框的电商主图、社交媒体封面等场景,且无 App 安装成本和广告。
阴影边框的最终颜色受透明度(不透明度)和模糊半径影响。即便颜色选纯黑(#000000),如果透明度设为 50% 且模糊半径较大,叠加在白色背景上会呈现灰色渐变效果。可尝试将不透明度拉到 100%,模糊半径设为 0,此时阴影会变成实色边缘,颜色即与选取一致。
隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。