尧图网站建设 
Label Studio 魔术棒图像分割实战从示例配置、CORS 设置到泛洪填充阈值化源码【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio本文以 Label Studio 编辑器示例web/libs/editor/src/examples/image_magic_wand/START.md为主体完整讲解 Magic Wand魔术棒图像分割示例的标注界面配置、跨域图片 CORS 设置、安装与启动方法并深入到源码层面剖析其扫描线泛洪填充 颜色阈值化的选取算法与性能优化策略。读完本文你可以为该示例编写可运行的 Label 配置与任务数据为远程存储桶配置允许像素级访问的 CORS 头并理解魔术棒从鼠标按下到生成 RLE 标注结果的完整调用链。魔术棒示例目录结构与使用场景魔术棒Magic Wand是 Label Studio 中面向图像分割的工具用户在图上点选一个区域工具基于点击位置的颜色做阈值化选取自动圈出颜色相近的连通区域适合卫星遥感影像这类同色成块的数据如积雪、云影、雾霾、云层的分类。示例目录 web/libs/editor/src/examples/image_magic_wand 包含以下文件文件作用START.md本示例的说明文档安装、CORS 配置、启动命令config.xml标注界面 Label 配置Labels Brush MagicWand Imagetasks.json示例任务数据S3 上的遥感影像含多个比例尺与假彩色图gcp_cors_config.json为 GCS 桶配置 CORS 头的示例配置文件annotations/1.json一条示例标注结果展示 RLE 输出格式index.js当前仓库中该示例的模块入口导出config、tasks、annotation三个对象供编辑器示例画廊加载标注界面配置 config.xml示例的 Label 配置全文如下View Labels namelabels_1 toNameimage_1 Label hotkey1 valueSnow background#f61e33/ Label hotkey2 valueCloud Shadow background#1eae3b/ Label hotkey3 valueHaze background#68eee5/ Label hotkey4 valueCloud background#1b32de/ Label hotkey5 valueExclude background#2C2C2B/ /Labels Brush namebrush_1 toNameimage_1 / MagicWand namemagicwand_1 toNameimage_1 / View stylewidth: 100%; margin-bottom: 20%; margin-side: 10%; Image nameimage_1 value$image zoomControltrue zoomtrue crossOriginanonymous / /View /View各部分要点Labels namelabels_1 toNameimage_15 个分类标签分别对应积雪Snow、云影Cloud Shadow、雾霾Haze、云Cloud与排除区Exclude每个Label通过hotkey属性绑定数字键 1–5 快速切换类别background指定该类别在画布上的覆盖色。Brush namebrush_1 toNameimage_1 /画笔工具。魔术棒适合快速圈出大块同色区域画笔则用于对选区边缘做手工精修两者配合使用。MagicWand namemagicwand_1 toNameimage_1 /魔术棒工具与Brush一样是控制型标签toName指向承载图片的Image对象。该标签在源码中由 tags/control/MagicWand.js 解析实际交互逻辑实现在 tools/MagicWand.jsx。Image ... value$image zoomControltrue zoomtrue crossOriginanonymous /$image绑定任务数据里的image字段zoomControl/zoom开启缩放控制。特别注意的是crossOriginanonymous——这正是魔术棒能读取跨域图片像素数据的关键前提详见下文 CORS 一节。从源码结构看tools/MagicWand.jsx 中工具模型声明了group: segmentation归入分割工具组、快捷键tool:magic-wand且unselectRegionOnToolChange: false即切换到其他工具时不自动取消已选中的选区方便魔术棒与画笔之间的连续协作。任务数据 tasks.jsontasks.json 定义了一个任务data.image是一个包含 4 张 S3 远程图片的数组同一幅 AnalyticMS 卫星图的 3 个不同比例尺版本加 1 张假彩色版本另有一个thumb字段作为列表缩略图{ id: 1202, data: { image: [ http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_1_...jpg, http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_2_...jpg, http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_3_...jpg, http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_false_color_...jpg ], thumb: http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_thumbnail_...jpg }, annotations: [], predictions: [] }config.xml中Image value$image会渲染出这个数组里的多张图标注员可以在不同比例尺/假彩色视图下切换选取。由于图片全部来自跨域 S3 存储这也正是该示例必须配套 CORS 配置的原因。Linux / Ubuntu 安装指南START.md 给出的原始安装步骤如下以文档原文为准适用于示例自带的backend服务# install python and virtualenv apt install python3.6 pip3 install virtualenv # setup python virtual environment virtualenv -p python3 env3 source env3/bin/activate # install requirements cd backend pip install -r requirements.txt步骤说明先用apt安装 Python 3.6 与virtualenv创建名为env3的虚拟环境并激活然后进入示例的backend目录安装依赖。需要说明的适用前提在 Label Studio 当前仓库中该示例已经以编辑器示例模块的形式存在——index.js 将config.xml、tasks.json与annotations/1.json作为 ES 模块导出供前端示例画廊直接引用不再要求单独部署上面的 backend 服务。上文的 Python 环境流程可视为历史版本独立示例的运行方式理解其依赖关系即可。跨域图片访问CORS 配置START.md 中特别强调了一个容易踩坑的问题魔术棒要读取图片的原始像素数据来做阈值化而浏览器默认禁止 JavaScript 读取跨域加载图片的像素数据。因此如果待分割的图片存放在 Google Cloud Storage、S3 等跨域存储上必须为存储桶开启 CORS 头否则取色选取会因像素数据被污染而失效。示例在Image标签上设置crossOriginanonymous声明图片以匿名方式跨域加载配合存储桶侧的 CORS 配置后即可正常读取像素。以 GCS 为例START.md 给出的操作命令是gsutil cors set gcp_cors_config.json gs://BUCKET-NAME示例目录内的 gcp_cors_config.json 内容如下[ { origin: [*], responseHeader: [*], method: [GET], maxAgeSeconds: 3600 } ]字段含义origin: [*]允许任意来源的页面发起跨域请求responseHeader: [*]允许前端读取所有 HTTP 响应头method: [GET]只放行 GET 请求读取图片数据所需maxAgeSeconds: 3600预检结果缓存 1 小时。START.md 同时提醒示例把origin与responseHeader都设为*意味着所有来源都能访问该数据。在生产环境中应结合你自己 Label Studio 部署的域名收紧origin白名单自行评估这一宽放配置带来的安全风险。启动示例START.md 给出的启动命令为python server.py -c config.json -l ../examples/image_magic_wand/config.xml -i ../examples/image_magic_wand/tasks.json -o output参数说明参数说明-c config.json服务器配置文件-l ../examples/image_magic_wand/config.xml标注界面 Label 配置即上文解析的 XML-i ../examples/image_magic_wand/tasks.json待标注任务数据-o output输出目录如前所述当前仓库中同一套config.xml与tasks.json已通过 index.js 导出可直接在编辑器示例画廊中加载体验无需额外启动服务。源码解析扫描线泛洪填充阈值化魔术棒的核心算法在 utils/magic-wand.js 中对外暴露floodFill函数。其签名与注释为/** Create a binary mask on the image by color threshold * Algorithm: Scanline flood fill (http://en.wikipedia.org/wiki/Flood_fill) * param {Object} image: {Uint8Array} data, {int} width, {int} height, {int} bytes * param {int} x of start pixel * param {int} y of start pixel * param {int} color threshold * param {Uint8Array} mask of visited points (optional) * return {Object} mask: {Uint8Array} data, {int} width, {int} height, {Object} bounds */ lib.floodFill (image, px, py, colorThreshold, mask) { ... }算法要点见 magic-wand.js 实现取样色以鼠标点击位置(px, py)的 RGBA 四通道颜色作为sampleColor样本。逐行扫描用栈保存待扫描的行区间{y, left, right, dir}对每个候选点比较其 R、G、B 三通道与样本色的差值任一通道差值绝对值超过colorThreshold即停止该方向扩展——这就是颜色阈值化。左右行走命中一个新点后沿该行向左、向右分别行走标记所有仍满足阈值条件且未访问的像素result[dy x] 1、visited[dy x] 1并把新的待扫描行压栈。输出返回一个w * h的二值Uint8Array掩膜及包围盒bounds文件同时引入了chroma-js用于颜色处理。交互三阶段mousedown / mousemove / mouseuptools/MagicWand.jsx 顶部有一段较长的技术注释完整描述了实现思路可归纳为三个阶段鼠标按下mousedownEv→initCanvas浏览器无法直接获取经过 CSS 变换缩放、平移后的像素数据因此会把图片当前的 CSS 变换重新应用到一块离屏画布上getTransformedImageData只把视口内的区域高效地 blit 到离屏缓冲区后续阈值化都在这块所见即所得的位图上进行。鼠标拖动mousemoveEv→threshold()以首次按下的屏幕坐标anchorScreenX/anchorScreenY为种子根据鼠标拖动距离实时调整阈值并用drawMask刷新预览掩膜——这就是拖动鼠标调节选取范围的交互效果。鼠标释放mouseupEv→setupFinalMask先把在缩放/平移/缩小状态下算出的掩膜通过copyTransformedMaskToNaturalSize正确缩放回图片原始尺寸natural size上的对应位置再由finalMaskToRegion把掩膜转成最终的BrushRegion结果。注释中还解释了一个体验细节如果直接在原始大尺寸图上做阈值化结果可能与拖动时看到的预览差异很大而最终掩膜在当前缩放级别边缘截止恰好能减少这种预期落差。性能考量同样写得很明确面对超大图像逐帧对整图做阈值化会非常慢所以动态预览只对离屏视口区域计算最终生成BrushRegion时也是直接把掩膜转成可复用的图像 URL交给BrushRegion快速绘制并利用cachedNaturalCanvas把同一类别的多次魔术棒选取合并缓存便于后续改色重绘。标注输出格式RLE魔术棒生成的选区最终输出为标准的分割标注结果。示例标注 annotations/1.json 的结构为{ id: 2, lead_time: 5.85, result: [ { original_width: 3000, original_height: 2860, image_rotation: 0, value: { format: rle, rle: [2, 11, 174, 128, 57, 27, 255, 6, 107, 0, 224, 79, ...] } } ] }其中original_width/original_height记录掩膜对应的原始图像尺寸value.format: rle表示选区以游程编码Run-Length Encoding的整数数组存储像素掩膜——相比逐点坐标这种紧凑格式既节省存储也方便下游直接用于训练语义/实例分割模型。该输出与 Label Studio 的标准化导出格式一致可直接进入数据导出与模型训练流程。测试与延伸阅读仓库为魔术棒工具提供了专门测试 tools/tests/MagicWand.test.jsx可用于验证工具行为。如需进一步查阅各标签的属性参考可继续阅读 magicwand.md、brush.md 与 brushlabels.md 标签文档结合 config.xml 与 gcp_cors_config.json 两个真实示例文件即可完成一套魔术棒 画笔卫星影像分割标注环境的搭建与调优。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Label Studio 魔术棒图像分割实战：从示例配置、CORS 设置到泛洪填充阈值化源码
Label Studio 魔术棒图像分割实战从示例配置、CORS 设置到泛洪填充阈值化源码【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio本文以 Label Studio 编辑器示例web/libs/editor/src/examples/image_magic_wand/START.md为主体完整讲解 Magic Wand魔术棒图像分割示例的标注界面配置、跨域图片 CORS 设置、安装与启动方法并深入到源码层面剖析其扫描线泛洪填充 颜色阈值化的选取算法与性能优化策略。读完本文你可以为该示例编写可运行的 Label 配置与任务数据为远程存储桶配置允许像素级访问的 CORS 头并理解魔术棒从鼠标按下到生成 RLE 标注结果的完整调用链。魔术棒示例目录结构与使用场景魔术棒Magic Wand是 Label Studio 中面向图像分割的工具用户在图上点选一个区域工具基于点击位置的颜色做阈值化选取自动圈出颜色相近的连通区域适合卫星遥感影像这类同色成块的数据如积雪、云影、雾霾、云层的分类。示例目录 web/libs/editor/src/examples/image_magic_wand 包含以下文件文件作用START.md本示例的说明文档安装、CORS 配置、启动命令config.xml标注界面 Label 配置Labels Brush MagicWand Imagetasks.json示例任务数据S3 上的遥感影像含多个比例尺与假彩色图gcp_cors_config.json为 GCS 桶配置 CORS 头的示例配置文件annotations/1.json一条示例标注结果展示 RLE 输出格式index.js当前仓库中该示例的模块入口导出config、tasks、annotation三个对象供编辑器示例画廊加载标注界面配置 config.xml示例的 Label 配置全文如下View Labels namelabels_1 toNameimage_1 Label hotkey1 valueSnow background#f61e33/ Label hotkey2 valueCloud Shadow background#1eae3b/ Label hotkey3 valueHaze background#68eee5/ Label hotkey4 valueCloud background#1b32de/ Label hotkey5 valueExclude background#2C2C2B/ /Labels Brush namebrush_1 toNameimage_1 / MagicWand namemagicwand_1 toNameimage_1 / View stylewidth: 100%; margin-bottom: 20%; margin-side: 10%; Image nameimage_1 value$image zoomControltrue zoomtrue crossOriginanonymous / /View /View各部分要点Labels namelabels_1 toNameimage_15 个分类标签分别对应积雪Snow、云影Cloud Shadow、雾霾Haze、云Cloud与排除区Exclude每个Label通过hotkey属性绑定数字键 1–5 快速切换类别background指定该类别在画布上的覆盖色。Brush namebrush_1 toNameimage_1 /画笔工具。魔术棒适合快速圈出大块同色区域画笔则用于对选区边缘做手工精修两者配合使用。MagicWand namemagicwand_1 toNameimage_1 /魔术棒工具与Brush一样是控制型标签toName指向承载图片的Image对象。该标签在源码中由 tags/control/MagicWand.js 解析实际交互逻辑实现在 tools/MagicWand.jsx。Image ... value$image zoomControltrue zoomtrue crossOriginanonymous /$image绑定任务数据里的image字段zoomControl/zoom开启缩放控制。特别注意的是crossOriginanonymous——这正是魔术棒能读取跨域图片像素数据的关键前提详见下文 CORS 一节。从源码结构看tools/MagicWand.jsx 中工具模型声明了group: segmentation归入分割工具组、快捷键tool:magic-wand且unselectRegionOnToolChange: false即切换到其他工具时不自动取消已选中的选区方便魔术棒与画笔之间的连续协作。任务数据 tasks.jsontasks.json 定义了一个任务data.image是一个包含 4 张 S3 远程图片的数组同一幅 AnalyticMS 卫星图的 3 个不同比例尺版本加 1 张假彩色版本另有一个thumb字段作为列表缩略图{ id: 1202, data: { image: [ http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_1_...jpg, http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_2_...jpg, http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_scale_3_...jpg, http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_false_color_...jpg ], thumb: http://htx-pub.s3.amazonaws.com/samples/magicwand/magic_wand_thumbnail_...jpg }, annotations: [], predictions: [] }config.xml中Image value$image会渲染出这个数组里的多张图标注员可以在不同比例尺/假彩色视图下切换选取。由于图片全部来自跨域 S3 存储这也正是该示例必须配套 CORS 配置的原因。Linux / Ubuntu 安装指南START.md 给出的原始安装步骤如下以文档原文为准适用于示例自带的backend服务# install python and virtualenv apt install python3.6 pip3 install virtualenv # setup python virtual environment virtualenv -p python3 env3 source env3/bin/activate # install requirements cd backend pip install -r requirements.txt步骤说明先用apt安装 Python 3.6 与virtualenv创建名为env3的虚拟环境并激活然后进入示例的backend目录安装依赖。需要说明的适用前提在 Label Studio 当前仓库中该示例已经以编辑器示例模块的形式存在——index.js 将config.xml、tasks.json与annotations/1.json作为 ES 模块导出供前端示例画廊直接引用不再要求单独部署上面的 backend 服务。上文的 Python 环境流程可视为历史版本独立示例的运行方式理解其依赖关系即可。跨域图片访问CORS 配置START.md 中特别强调了一个容易踩坑的问题魔术棒要读取图片的原始像素数据来做阈值化而浏览器默认禁止 JavaScript 读取跨域加载图片的像素数据。因此如果待分割的图片存放在 Google Cloud Storage、S3 等跨域存储上必须为存储桶开启 CORS 头否则取色选取会因像素数据被污染而失效。示例在Image标签上设置crossOriginanonymous声明图片以匿名方式跨域加载配合存储桶侧的 CORS 配置后即可正常读取像素。以 GCS 为例START.md 给出的操作命令是gsutil cors set gcp_cors_config.json gs://BUCKET-NAME示例目录内的 gcp_cors_config.json 内容如下[ { origin: [*], responseHeader: [*], method: [GET], maxAgeSeconds: 3600 } ]字段含义origin: [*]允许任意来源的页面发起跨域请求responseHeader: [*]允许前端读取所有 HTTP 响应头method: [GET]只放行 GET 请求读取图片数据所需maxAgeSeconds: 3600预检结果缓存 1 小时。START.md 同时提醒示例把origin与responseHeader都设为*意味着所有来源都能访问该数据。在生产环境中应结合你自己 Label Studio 部署的域名收紧origin白名单自行评估这一宽放配置带来的安全风险。启动示例START.md 给出的启动命令为python server.py -c config.json -l ../examples/image_magic_wand/config.xml -i ../examples/image_magic_wand/tasks.json -o output参数说明参数说明-c config.json服务器配置文件-l ../examples/image_magic_wand/config.xml标注界面 Label 配置即上文解析的 XML-i ../examples/image_magic_wand/tasks.json待标注任务数据-o output输出目录如前所述当前仓库中同一套config.xml与tasks.json已通过 index.js 导出可直接在编辑器示例画廊中加载体验无需额外启动服务。源码解析扫描线泛洪填充阈值化魔术棒的核心算法在 utils/magic-wand.js 中对外暴露floodFill函数。其签名与注释为/** Create a binary mask on the image by color threshold * Algorithm: Scanline flood fill (http://en.wikipedia.org/wiki/Flood_fill) * param {Object} image: {Uint8Array} data, {int} width, {int} height, {int} bytes * param {int} x of start pixel * param {int} y of start pixel * param {int} color threshold * param {Uint8Array} mask of visited points (optional) * return {Object} mask: {Uint8Array} data, {int} width, {int} height, {Object} bounds */ lib.floodFill (image, px, py, colorThreshold, mask) { ... }算法要点见 magic-wand.js 实现取样色以鼠标点击位置(px, py)的 RGBA 四通道颜色作为sampleColor样本。逐行扫描用栈保存待扫描的行区间{y, left, right, dir}对每个候选点比较其 R、G、B 三通道与样本色的差值任一通道差值绝对值超过colorThreshold即停止该方向扩展——这就是颜色阈值化。左右行走命中一个新点后沿该行向左、向右分别行走标记所有仍满足阈值条件且未访问的像素result[dy x] 1、visited[dy x] 1并把新的待扫描行压栈。输出返回一个w * h的二值Uint8Array掩膜及包围盒bounds文件同时引入了chroma-js用于颜色处理。交互三阶段mousedown / mousemove / mouseuptools/MagicWand.jsx 顶部有一段较长的技术注释完整描述了实现思路可归纳为三个阶段鼠标按下mousedownEv→initCanvas浏览器无法直接获取经过 CSS 变换缩放、平移后的像素数据因此会把图片当前的 CSS 变换重新应用到一块离屏画布上getTransformedImageData只把视口内的区域高效地 blit 到离屏缓冲区后续阈值化都在这块所见即所得的位图上进行。鼠标拖动mousemoveEv→threshold()以首次按下的屏幕坐标anchorScreenX/anchorScreenY为种子根据鼠标拖动距离实时调整阈值并用drawMask刷新预览掩膜——这就是拖动鼠标调节选取范围的交互效果。鼠标释放mouseupEv→setupFinalMask先把在缩放/平移/缩小状态下算出的掩膜通过copyTransformedMaskToNaturalSize正确缩放回图片原始尺寸natural size上的对应位置再由finalMaskToRegion把掩膜转成最终的BrushRegion结果。注释中还解释了一个体验细节如果直接在原始大尺寸图上做阈值化结果可能与拖动时看到的预览差异很大而最终掩膜在当前缩放级别边缘截止恰好能减少这种预期落差。性能考量同样写得很明确面对超大图像逐帧对整图做阈值化会非常慢所以动态预览只对离屏视口区域计算最终生成BrushRegion时也是直接把掩膜转成可复用的图像 URL交给BrushRegion快速绘制并利用cachedNaturalCanvas把同一类别的多次魔术棒选取合并缓存便于后续改色重绘。标注输出格式RLE魔术棒生成的选区最终输出为标准的分割标注结果。示例标注 annotations/1.json 的结构为{ id: 2, lead_time: 5.85, result: [ { original_width: 3000, original_height: 2860, image_rotation: 0, value: { format: rle, rle: [2, 11, 174, 128, 57, 27, 255, 6, 107, 0, 224, 79, ...] } } ] }其中original_width/original_height记录掩膜对应的原始图像尺寸value.format: rle表示选区以游程编码Run-Length Encoding的整数数组存储像素掩膜——相比逐点坐标这种紧凑格式既节省存储也方便下游直接用于训练语义/实例分割模型。该输出与 Label Studio 的标准化导出格式一致可直接进入数据导出与模型训练流程。测试与延伸阅读仓库为魔术棒工具提供了专门测试 tools/tests/MagicWand.test.jsx可用于验证工具行为。如需进一步查阅各标签的属性参考可继续阅读 magicwand.md、brush.md 与 brushlabels.md 标签文档结合 config.xml 与 gcp_cors_config.json 两个真实示例文件即可完成一套魔术棒 画笔卫星影像分割标注环境的搭建与调优。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考