交互式图像分割演示 - 点击分离对象
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
UD5工具箱
点击图像标记对象区域,正点(包含)· 负点(排除)· 实时预览分割结果
加载图片后,点击图像开始标记分割区域
🖱 左键点击 = 添加标记 | 按住Shift = 负点排除
交互式图像分割是一种半自动的图像处理技术,用户通过简单的交互操作(如点击、画线、框选等)向算法提供提示,算法根据这些提示自动识别并分割出目标对象。与全手动抠图相比,它大幅提升了效率;与全自动分割相比,它允许用户纠正和引导,获得更精确的结果。典型代表包括SAM(Segment Anything Model)等AI驱动的分割工具。
正点(绿色):标记"这是目标对象的一部分",算法会从正点出发,扩散寻找颜色相似的相邻像素,形成包含区域。
负点(红色):标记"这不是目标对象",用于排除误包含的区域,例如背景或相邻物体。通过正负点配合,可以精确控制分割边界。
阈值控制颜色相似度的敏感程度。数值越小(如5-15),算法越严格,只有与点击位置颜色非常接近的像素才会被包含,适合分割颜色均匀的物体。数值越大(如40-60),算法越宽松,会包含颜色差异较大的相邻像素,适合纹理丰富或渐变的物体。建议从默认值28开始,根据实际效果微调。
本工具使用洪水填充(Flood Fill)算法结合颜色空间距离度量。从标记点出发,在RGB颜色空间中计算相邻像素与起始点的欧几里得距离,距离小于阈值的像素被纳入分割区域。多个正点取并集,负点区域取差集,最终得到精确的分割蒙版。这是一种经典且高效的图像分割方法,类似于Photoshop的"魔术棒"工具。
图像分割广泛应用于:
• 电商设计:快速抠图、换背景
• 医学影像:识别器官、病变区域
• 自动驾驶:识别道路、行人、车辆
• AR/VR:实时分离前景和背景
• 摄影后期:局部调色、背景虚化
• 工业检测:缺陷识别、零件分拣
提高分割质量的技巧:
1. 在目标对象颜色均匀的区域放置正点
2. 使用多个正点覆盖对象的不同颜色区域
3. 在误包含区域放置负点进行排除
4. 适当调节阈值——纹理丰富的对象用较高阈值
5. 对于复杂边界,可以放大图像后精细标记
6. 结合Shift键快速切换正负点模式
支持常见Web图像格式:JPEG、PNG、WebP、BMP等。图像会自动缩放至适合处理的尺寸(最大边约800px),确保在浏览器中流畅运行。原始分辨率很高的图片(如4000×3000)会被等比缩放处理,这不会影响分割的视觉效果。如需处理超大图像,建议先在上传前进行适当压缩。
导出为PNG格式的蒙版图像(透明背景,选中区域为白色半透明)。您可以:
• 在Photoshop中作为图层蒙版使用
• 在代码中读取像素值进行程序化处理
• 作为训练数据标注参考
• 直接导入支持蒙版的视频编辑软件
蒙版分辨率与显示画布一致,确保与原始图像完美对齐。
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
上传 GIF 动画,提取每一帧并拼接为单张精灵表图片,可设置排列方式,用于游戏开发。
配置启动画面背景色与图标,生成对应manifest和meta标签代码。
粘贴自定义图标字体的Unicode,调节尺寸颜色立即查看效果。
精选数百种流行渐变配色,点击即复制CSS代码,用于网页或应用背景。
上传正面照,简单亮度阈值提取剪影,可下载PNG。
将两到三张有重叠的手持照片拖入,手动寻找重叠区域自动混合为宽幅全景图。
上传图片并在白色、黑色、透明等背景上预览效果,辅助电商首图或UI元素设计。
选中页面上的某个HTML元素,利用html2canvas将其渲染为PNG图片下载。
生成用于网页各区块间的波浪或倾斜过渡分割线,导出为SVG或CSS代码。
定义字段名称和类型(姓名、邮箱、数字范围等),批量生成符合规则的 JSON 模拟数据。
上传视频,截取其中一小段并转换GIF,可调帧率和尺寸,前端转换。
上传GIF并自动水平平铺提取各帧,生成对应的CSS精灵图定位代码。
前端图片裁剪工具,支持拖拽选取区域、固定比例(如1:1, 4:3)裁剪,实时预览并下载裁剪后图片。
交互式探索Julia集,实时调整复数参数c,支持平滑着色和鼠标缩放,感受分形之美。
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
上传图片随意摆放、缩放、旋转,创建个人愿景或情绪板。
通过拖拽贝塞尔曲线调整图片的亮度和颜色映射,实现高级调色效果。
在Canvas画一个日常物品,内建简易识别尝试猜出画的是什么。
输入链接,上传Logo嵌入中心,选择颜色与模板,生成个性化高容错艺术码。
设置浏览器标题和图标,模拟在暗色/亮色主题下标签栏的样子。
编写海龟绘图规则和初始公理,迭代生成龙曲线、植物等分形图形。
在线响应式布局测试器,同时预览常见设备分辨率的网页显示效果,帮助检查前端适配。
粘贴代码并选择高亮主题,将代码片段渲染为精美的PNG图片,便于社交媒体分享。
上传GIF动图,将所有帧提取出来并打包下载为单个PNG文件,用于修改分析。
拖拽添加图片与文字,生成响应式轮播图Slider,支持自动播放和导航点,提供HTML/CSS/JS代码。
使用Web Audio PannerNode,在头顶环绕拖拽一个声源,体验声音在空间的移动。
生成形似iOS或Android的开关切换按钮,支持动画和自定义颜色。
输入行与列的线索数字,自动求解逻辑绘图谜题并显示像素图。