| 术语 | 定义 | 与本工具的关系 |
|---|---|---|
| 图像分割 | 将数字图像划分为多个具有特定语义含义的区域或对象的过程,是计算机视觉中的基础任务之一。分割结果通常以像素级别的分类标签或蒙版形式呈现。 | 本工具的核心功能,通过用户交互实现图像中目标对象的自动分离。 |
| 交互式分割 | 一种半自动的图像分割方式,由用户提供少量提示信息(如标记点、边界框等),算法根据这些提示自动完成剩余的分割计算。相比全自动分割,交互式方法在复杂场景下往往能获得更高的精度。 | 本工具采用的分割范式,用户通过放置正负点与算法协作完成分割。 |
| 洪水填充 | 一种经典的图像处理算法,从指定的种子点开始,向四周扩散填充颜色相似的相邻像素,直到遇到颜色差异超过阈值的边界为止。也称为种子填充算法。 | 本工具的核心算法基础,从正点位置开始向外扩展选区。 |
| RGB颜色空间 | 一种基于红(Red)、绿(Green)、蓝(Blue)三原色的色彩模型,每个像素由三个分量值表示。通过计算两个像素在RGB空间中的欧氏距离可以衡量颜色的相似程度。 | 本工具用于计算标记点与周围像素的颜色距离,判断是否应纳入选区。 |
| 颜色容差阈值 | 控制颜色匹配严格程度的参数。当两个像素之间的颜色距离小于该阈值时,认为它们颜色相似;大于阈值则认为颜色不同。阈值越小分割越精细,越大则选区越宽松。 | 工具中的可调参数,直接影响分割选区的大小和边界精度。 |
| 蒙版 | 一种用于遮罩或揭示图像特定区域的灰度图像。在图像处理中,蒙版通常用白色表示需要保留的区域,黑色表示需要遮挡的区域,灰色表示半透明过渡。 | 工具输出的最终结果,为PNG透明背景格式,可直接用于图像合成。 |
| 正点 | 在交互式分割中,用户标记的属于目标对象的参考点。算法以正点所在像素的颜色为基准,向外扩展选择颜色相近的相邻像素。 | 工具中用绿色圆点表示,放置在需要保留的目标对象区域上。 |
| 负点 | 在交互式分割中,用户标记的不属于目标对象的参考点。算法会将负点附近颜色相似的区域排除在选区之外。 | 工具中用红色圆点表示,放置在需要排除的背景或干扰区域上。 |
| 像素 | 数字图像的最小组成单元,每个像素包含颜色信息。在本工具使用的RGB模型中,每个像素由红、绿、蓝三个0-255的数值表示。 | 分割操作在像素级别进行,每个像素都会被判定为选中或未选中。 |
| PNG格式 | 一种无损压缩的位图图像格式,支持alpha通道(透明度信息)。PNG格式广泛用于网络图像和需要透明背景的场景。 | 工具导出蒙版时采用的格式,确保透明信息完整保留。 |
交互式图像分割演示 - 点击分离对象
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
GIF 动画转精灵表生成器 - 按行/列提取帧
上传 GIF 动画,提取每一帧并拼接为单张精灵表图片,可设置排列方式,用于游戏开发。
首屏大图构建器 - 标题/按钮/背景
设计带有大标题、描述、CTA 按钮和背景图的首屏区域,生成完整代码。
PWA启动画面生成 - 图标与背景色配置
配置启动画面背景色与图标,生成对应manifest和meta标签代码。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode,调节尺寸颜色立即查看效果。
状态机可视化工具 - 绘制状态图并生成代码
拖拽添加状态和转换,定义事件和动作,生成 JavaScript 状态机代码。
渐变背景合集 - 现成UI Gradient一键复制
精选数百种流行渐变配色,点击即复制CSS代码,用于网页或应用背景。
剪影生成器 - 提取人物/物体轮廓变黑
上传正面照,简单亮度阈值提取剪影,可下载PNG。
简易全景图拼接器 - 两张图左右合成
将两到三张有重叠的手持照片拖入,手动寻找重叠区域自动混合为宽幅全景图。
图片背景预览器 - 不同UI背景效果模拟
上传图片并在白色、黑色、透明等背景上预览效果,辅助电商首图或UI元素设计。
DOM元素截图工具 - 指定区域导出图片
选中页面上的某个HTML元素,利用html2canvas将其渲染为PNG图片下载。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线,导出为SVG或CSS代码。
基于模式的模拟数据生成器 - 自定义字段与规则
定义字段名称和类型(姓名、邮箱、数字范围等),批量生成符合规则的 JSON 模拟数据。
视频片段转GIF - 选取时间段导出动图
上传视频,截取其中一小段并转换GIF,可调帧率和尺寸,前端转换。
GIF分解精灵图导出 - 提取单帧和CSS定位
上传GIF并自动水平平铺提取各帧,生成对应的CSS精灵图定位代码。
在线图片裁剪工具 - Canvas自由裁剪/固定比例
前端图片裁剪工具,支持拖拽选取区域、固定比例(如1:1, 4:3)裁剪,实时预览并下载裁剪后图片。
朱利亚集分形探索 - 互动缩放彩色复数
交互式探索Julia集,实时调整复数参数c,支持平滑着色和鼠标缩放,感受分形之美。
视频动态缩略图生成器 - 提取片段生成 GIF
选择视频的一个片段,生成几秒钟的 GIF 动图作为预览缩略图,可设置尺寸和帧率。
粘贴事件处理演示 - 监听并解析剪贴板内容
捕捉页面粘贴事件,展示文本、HTML 或图片数据,演示如何定制粘贴行为。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
灵感拼贴板 - 图片随意拖放排版
上传图片随意摆放、缩放、旋转,创建个人愿景或情绪板。
曲线调整工具 - 类似PS的色阶曲线
通过拖拽贝塞尔曲线调整图片的亮度和颜色映射,实现高级调色效果。
简笔画识别小游戏 - 画图形AI猜
在Canvas画一个日常物品,内建简易识别尝试猜出画的是什么。
嵌入式Logo二维码设计器 - 自定义颜色与中心图
输入链接,上传Logo嵌入中心,选择颜色与模板,生成个性化高容错艺术码。
图片 3D 透视变换工具 - 拖拽角点进行三维映射
在图片上拖拽四个角点,实现任意四边形映射,模拟三维空间中的图片摆放效果。
指针锁定 API 演示 - 3D 迷宫移动
使用指针锁定 API 在 3D 场景中控制视角移动,模拟 FPS 游戏鼠标控制。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标,模拟在暗色/亮色主题下标签栏的样子。
L-system编辑器 - 自定义规则绘制分形
编写海龟绘图规则和初始公理,迭代生成龙曲线、植物等分形图形。
响应式设计测试工具 - 多分辨率视口预览
在线响应式布局测试器,同时预览常见设备分辨率的网页显示效果,帮助检查前端适配。
UD5工具箱