Remove background

Upload an image or pick a sprite from your gallery — we'll strip the background.

Setting

Choose a sprite to remove background
From My SpritesReuse an existing visual
Choose an imagePNG, JPG or WebP
Method
6 CREDITS
Transparent PNG

See the background disappear

Example
Example before background removal
Example after background removal
BEFORE AFTER
Drag the divider to compare

AI finds the subject on its ownTrees, textures, gradients — no settings needed.

6 CREDITS

Good to know

StandardOnly edge-connected color is removed

Background color fully enclosed by your sprite stays. Use Smart, or close the gap first.

StandardPixel edges stay crisp

Pixels are kept or removed, never blurred — ideal for pixel art.

StandardPick a color your sprite never uses

Magenta or pure green work best. Shared colors may get removed.

设计说明

版本 1.1 · 生成 2026-11-05 · 修改 2026-11-06（默认容差改为 55，重做品红底示例图） · 对话 ID：未知 · 仅为原型，未接入项目

一、要解决的问题

现状本次做法
未登录时右侧只有一句 “Log in to see your sprites”，整块是空的，用户不知道这个工具能做到什么程度首屏放一个可拖动的前后对比：一拖就看到背景被去掉，并用 ×4 放大窗展示边缘质量
Smart / Standard 两个方式只有一行文字说明，用户不知道该选哪个案例顶部用同一套分段选择器切换两种方式，各自配一张最典型的原图：Smart＝森林复杂场景，Standard＝纯品红底；副标题直接写清适用场景和费用（6 积分 / 免费）
Tolerance（容差 0–300）是最难懂的参数，填错就会残边或误删Standard 下给出一个只作用于案例的容差滑杆，实时用与服务器相同的算法计算结果；默认停在 55（最佳），滑杆底色分三段（偏低 / 可用 / 过高），状态标签同步提示，并用一句话教用户“取能去干净的最低值”
Standard 只去除和图片边缘相连的背景，这个规则不写出来，用户会以为是 bugGood to know 第一条用示意图说明：被角色包住的同色区域会保留

二、显示规则与交互约定

  • 与 Sprite Generator 一致：未登录，或已登录但没有去背景记录时，右侧显示本演示；有记录或正在处理时显示 Creation Record。
  • 左侧是设置，右侧是案例，两者不联动：右侧切换方式、拖动对比条、调容差，都不会改变左侧设置，反之亦然。右上角的 Example 标签和容差旁的 “#FF00FF background” 都在提示“这是示例”。
  • 首次进入时对比条自动左右扫一次（约 1.6 秒）告诉用户可以拖；系统开启“减少动态效果”时不播放。对比条支持鼠标、触摸，以及键盘左右方向键。
  • 选中态沿用 Rotate 指引的规则：未选中为白底，选中为浅绿底加绿色描边。
  • 手机宽度（< 560px）下隐藏 ×4 放大窗，避免遮挡角色；对比条与容差滑杆保留。

三、依据的真实规则（来自项目代码）

  • 积分：Smart 6 积分，Standard 0 积分（spriteRemoveBackgroundInput.ts）。
  • Smart 调用 bria-remove-background 模型；Standard 从图片四条边开始向内“漫水”，只删除与边缘连通、且与背景色 RGB 距离 ≤ 容差的像素（removeSolidBackground），像素只保留或删除，不做半透明。
  • 容差范围 0–300，默认背景色 #FF00FF（sprite-background.ts）。本原型按要求把默认容差定为 55；项目代码当前的默认值 DEFAULT_SPRITE_BACKGROUND_TOLERANCE 仍是 200，上线时需同步修改（左侧设置面板的默认值也随之变为 55）。
  • 为什么 55 最好：它是能把背景和粉色光晕去干净的最低容差。容差越高，越容易把角色身上接近品红的颜色（粉、紫）一起删掉，所以“刚好去干净”就是最优点。
  • 在本示例图上实测（与服务器同一算法）：< 20 背景基本去不掉；20–50 角色外圈残留粉色光晕；55 完全干净；60–265 同样干净但高于需要；≥ 268 开始误删角色（滑杆步长为 5，故“过高”区从 270 起）（300 时头部约 1800 个像素被删）。滑杆三段底色与状态文案即按此划分，换示例图后需重新测量。

四、图片规格与来源（均为 384×384 PNG，位于 images/）

  • rb-subject.png：透明底角色，来自 Rotate 指引新生成的冒险者正面参考图（双手空着，剑在剑鞘里）。
  • rb-smart-before.png：用项目素材 ai-sprite-pine-tree.png、ai-sprite-ground-tile.png 拼成的森林场景，以 128px 像素画再放大 3 倍，叠加角色。
  • rb-smart-after.png：暂用角色原始透明图示意，不是 Smart 模型的真实输出；上线前建议用真实 Smart 结果替换，避免效果夸大。
  • rb-standard-before.png：模拟真实 AI 出图的品红底素材——角色为硬边像素，品红背景带 ±16 的轻微色差，角色外圈有一圈 15% 混色的淡粉光晕；rb-standard-after.png 为容差 55 下按服务器算法算出的真实结果，页面无法实时计算时作为备用。

五、注意

  • 直接双击用浏览器打开本文件时，部分浏览器出于安全限制不允许读取本地图片像素，容差滑杆会退化为固定显示默认值 55 的结果；通过本地服务器或部署后访问则可完整交互。