前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文围绕microsoft/fast-colorsFAST 1.x 版本的 API 文档页 PixelBox.modifiedMedianCut 展开系统讲解这一属性背后的“改良中值切分”Modified Median Cut颜色量化算法它如何把 RGB 颜色区间切分为两个更小的PixelBox、为什么它不直接在中位数处下刀以及该属性在整个quantize()量化流水线中的位置与配套配置项QuantizeConfig、Histogram、QuantizedColor等帮助读者理解从像素图像中提取小调色板的完整技术链路。1. 这个 API 在 FAST 1.x 颜色工具中的定位microsoft/fast-colors是 FAST 1.x 时代的颜色计算库官方 API 文档索引页 fast-colors.md 中列出了它的全部公开成员颜色模型类ColorRGBA64、ColorHSL、ColorHSV、ColorLAB、ColorLCH、ColorXYZ、调色板生成类ColorPalette、ComponentStateColorPalette、色彩空间转换与插值函数以及一组图像颜色量化相关的类型Histogram、PixelBlob、ImageDataPixelBlob、PixelBox、quantize()、quantizeHistogram()、QuantizeConfig和QuantizedColor。PixelBox.modifiedMedianCut属于这条量化流水线中的核心环节。它的完整 API 页面位于 sites/website/src/docs/1.x/api/fast-colors.pixelbox.modifiedmediancut.md页面标注该文件由 API Documenter 自动生成对应包microsoft/fast-colors。需要说明的是当前仓库快照的packages/目录下仅包含fast-element、fast-router、fast-test-harness三个包fast-colors 的源码并不在其中因此本文的技术细节均以该仓库中的 1.x API 文档为事实依据不再引用具体源码文件行号。2. 量化流水线总览从 PixelBlob 到 QuantizedColor要理解modifiedMedianCut先要理解它所在的调用链。根据 quantize() 函数文档入口 API 为export declare function quantize(source: PixelBlob, config?: QuantizeConfig): QuantizedColor[];其官方描述为“The image stored in the source PixelBlob is reduced down to a small set of colors”把源PixelBlob中存储的图像压缩为少量颜色并注明其算法源自 leptonica 项目的 Modified Median Cut Quantization 实现。流水线的逻辑结构如下PixelBlob像素数据的抽象接口见 fast-colors.pixelblob.md提供width、height、totalPixels以及getPixel()/getPixelRGBA()读取能力。文档中的ImageDataPixelBlob类就是它在浏览器ImageData对象上的实现配合loadImageData(source)函数可从图片 URL 加载像素数据。HistogramHistogram 文档 说明它“对每种可能的颜色统计源图像中有多少像素与之匹配”。构造器签名为(source, significantBits, pixelSkipping, isHistogramPixelValid)。当significantBits 8时每个颜色通道先被压缩到指定位数再计数——默认 5 位时8 位/通道0-255被降为 0-31原本不同的颜色会被合并计数。这大幅缩小了直方图规模也决定了量化的精度上限。PixelBoxRGB 颜色空间中的一个长方体区间见下文第 3 节modifiedMedianCut就是作用在它身上的切分方法。QuantizedColor量化输出的单个结果接口定义见 fast-colors.quantizedcolor.mdexport interface QuantizedColor包含三个属性colorColorRGBA64最终选出的代表色、colorVolume该区间覆盖的颜色体积与pixelCount落在该区间内的像素数。quantize()的返回值即QuantizedColor[]也就是最终的小调色板。3. PixelBox 类与 modifiedMedianCut 属性的完整定义PixelBox类用于“表示 RGB 颜色空间中的一个范围”Represents a range of colors in RGB color space见 fast-colors.pixelbox.md。其构造器签名如下见 constructor 文档constructor(globalHistogram: Histogram, minRed: number, maxRed: number, minGreen: number, maxGreen: number, minBlue: number, maxBlue: number);即一个PixelBox由六个边界值三通道各自的 min/max加上一个全局Histogram引用构成Histogram用于后续统计落在区间内的像素数量。PixelBox的完整属性列表继承自原文档的属性表为属性类型说明averageColorColorRGBA64区间内的平均颜色通常作为该 box 的代表色输出colorVolumenumber区间在颜色空间中的体积三通道 range 之积globalHistogramHistogram所属的全局直方图引用minRed/maxRed、minGreen/maxGreen、minBlue/maxBluenumberRGB 三通道边界modifiedMedianCut() [PixelBox \| null, PixelBox \| null]本文主题见下节pixelCountnumberreadonly落在区间内的像素数rangeRed/rangeGreen/rangeBluenumber各通道的跨度即 max − min而modifiedMedianCut属性在原文档中的完整描述与签名如下这也是本文的核心内容Attempts to divide the range of colors represented by this PixelBox into two smaller PixelBox objects. This does not actually cut directly at the median, rather it finds the median then cuts halfway through the larger box on either side of that median. The result is that small areas of color are better represented in the final output. Based on the Modified Median Cut Quantization implementation from https://github.com/DanBloomberg/leptonica/blob/master/src/colorquant2.c签名modifiedMedianCut: () [PixelBox | null, PixelBox | null];逐句拆解这段官方说明目标把当前PixelBox代表的颜色范围切分为两个更小的PixelBox。关键区别它“并不是直接在中位数处下刀”does not actually cut directly at the median。经典的中值切分Median Cut86 年经典调色板算法是在最长通道的中位数值处一分为二而改良版是先找到中位数再在中位数两侧的“较大一侧”的中点位置切分。效果“small areas of color are better represented in the final output”——少量像素占据的小颜色区域在最终输出中得到更好的保留即小面积的对比色不容易被大区域“吞并”。算法出处基于 leptonica 项目中colorquant2.c的 Modified Median Cut Quantization 实现该外链在原文档中作为算法溯源给出本文不展开外部链接。返回类型[PixelBox | null, PixelBox | null]的两个null值得注意它表明切分是一个“尝试”Attempts to divide——当区间已经切不出两个有效子 box 时例如区间过窄、像素不足、被QuantizeConfig.isBoxValid谓词判定无效对应位置会返回null调用方需自行处理无法继续切分的情况。4. 算法行为解析为什么要“在较大侧的中点切”从官方描述可以还原出这个算法与经典中值切分的差异及动机经典中值切分统计 box 内所有像素找出直方图意义上的中位数然后直接在中位数处切开。问题在于如果某个 box 内绝大多数像素聚在一端比如 95% 的像素在深色端、5% 在浅色端中位数会非常贴近少数派那一侧一刀下去少数派那一小簇颜色可能被压成极薄的区间最终在输出调色板中丢失或者与多数派合并成同一色。改良中值切分本属性的行为先计算中位数位置在像素分布上而非简单的几何中心比较中位数两侧两个子区间的“大小”结合colorVolume颜色体积与像素分布来衡量在较大一侧的中点处下刀而不是在中位数处下刀。这样做的直接后果是少数派一侧小面积颜色区域保留了相对完整的区间宽度得以在后续迭代中作为一个独立的PixelBox存活并进入最终调色板。官方说明中“The result is that small areas of color are better represented in the final output”正是对这一设计目标的总结。对于图像配色提取这类应用场景图像中大面积背景 小面积强调色/文字色该策略能让小面积的强对比颜色进入输出调色板而不是被背景色淹没。切分维度与终止条件从PixelBox暴露的rangeRed、rangeGreen、rangeBlue与colorVolume属性可以推断文档未显式说明切轴选择规则此处为基于 API 结构的合理推断切分时需要在三个通道跨度中选择下刀轴当某 box 的各通道范围已小、或pixelCount不足以支撑再次切分时modifiedMedianCut会通过返回null表明无法继续切分从而终止该分支的递归。5. 在 quantize() 流程中的角色与 QuantizeConfig 配套参数modifiedMedianCut并不建议用户直接调用——它是quantize()内部反复执行的切分原语初始的大 box 被不断切分直到达到目标调色板大小或无法再切。整个过程的约束由 QuantizeConfig 控制其全部字段继承自原文档属性表如下字段类型作用fractionByPopulationnumber对于最终大小为targetPaletteSize的调色板前fractionByPopulation * targetPaletteSize个颜色**仅按 population像素数**排序选取其余颜色按population * colorVolume排序。这让小面积高对比色能进入最终输出——与modifiedMedianCut的“小区域更好保留”设计相互呼应isBoxValid((box: PixelBox) boolean) \| null谓词用于筛掉不希望进入最终输出的 box例如剔除pixelCount低于某阈值的 boxisHistogramPixelValid((pixel: number[]) boolean) \| null谓词在直方图构建阶段剔除特定像素参数为[0,255]范围的 RGBA 四元组。例如排除接近纯白或透明的颜色maxIterationsnumber迭代上限超过则中止并返回当前结果仅在奇怪的极端输入下触发pixelSkippingnumber像素采样步长。调小会增加 CPU 负担但纳入更多像素参与计算significantBitsnumber取值范围[1,8]。内存占用按4 * 2^(3*significantBits)增长设为 8 时需要约 64 MB 的直方图targetPaletteSizenumber期望的输出调色板大小颜色极少的图像等边缘情况下实际输出可能不同另有 defaultQuantizeConfig 变量 提供默认配置quantize(source)不传config参数时即使用它。一个典型的使用形态按 API 文档描述的签名拼出的调用方式import { ImageDataPixelBlob, loadImageData, quantize, defaultQuantizeConfig, } from microsoft/fast-colors; // loadImageData 返回 HTMLImageElement → canvas → ImageData 的像素数据 const imageData await loadImageData(photo.jpg); const blob new ImageDataPixelBlob(imageData); // 提取约 8 个主色可通过 config 覆盖默认行为 const palette quantize(blob, { ...defaultQuantizeConfig, targetPaletteSize: 8, significantBits: 5, // 例剔除像素数过少的 box防止噪点色进入调色板 isBoxValid: (box) box.pixelCount 100, // 例构建直方图时排除完全透明的像素 isHistogramPixelValid: ([r, g, b, a]) a 0, }); // palette: QuantizedColor[]每项含 color(ColorRGBA64)、colorVolume、pixelCount for (const entry of palette) { console.log(entry.color, entry.pixelCount); }其中isBoxValid直接以PixelBox为参数可读取其pixelCount、colorVolume、range*等属性说明切分流程在每次modifiedMedianCut产出子 box 后都会经过有效性谓词把关无效分支自然被丢弃与modifiedMedianCut返回null的语义一致。此外还有一个更底层的入口 quantizeHistogram(histogram, config)当需要手工构造/修改Histogram、或对同一张直方图用不同config反复量化时可以直接从直方图层面启动文档同样注明其算法基于 leptonica 的 Modified Median Cut Quantization 实现。6. 相关文档与适用边界本文全部 API 事实来源于仓库内 1.x 自动生成的 API 文档树fast-colors 索引、PixelBox、modifiedMedianCut、quantize、QuantizeConfig、Histogram、QuantizedColor、quantizeHistogram。这些文档均带有!-- Do not edit this file. It is automatically generated by API Documenter. --标记对应 FAST 1.x 时代的microsoft/fast-colors包当前仓库快照的packages/目录不包含该包源码因此无法在此给出实现级源码引用涉及内部切轴选择等细节处已明确标注为基于 API 结构的推断。使用该 API 的前提项目处于 FAST 1.x 技术栈microsoft/fast-colors及其依赖版本且量化场景运行于支持ImageData/ canvas 的浏览器环境loadImageData依赖HTMLImageElement与HTMLCanvasElement。若你的项目使用仓库中packages/fast-element下的 FAST 2.x/3.x 体系颜色处理路径已不同本文结论仅适用于 1.x 的 fast-colors API。小结PixelBox.modifiedMedianCut是microsoft/fast-colors图像量化流水线的核心切分原语它返回() [PixelBox | null, PixelBox | null]通过“先找中位数、再在中位数较大一侧的中点下刀”的改良策略让像素占比小的颜色区域在最终调色板中获得更好的表示。理解它与Histogram显著位压缩计数、QuantizeConfigfractionByPopulation、isBoxValid、significantBits等约束以及quantize()/quantizeHistogram()入口的协作关系就能完整掌握 FAST 1.x 从图像提取小调色板的整套机制也能据此调整配置来满足“保小面积强调色”“排除透明/近白像素”“控制直方图内存”等实际工程诉求。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐深度强化学习中的值迭代算法解析深度强化学习中的值迭代算法解析 引言 值迭代 Value Iteration 是强化学习中最基础也最重要的算法之一它基于动态规划原理用于在马尔可夫决策过程文档教程人工智能深度学习NLP计算机视觉强化学习iina-plus高级技巧自定义弹幕样式、速度与过滤规则打造专属观影体验iina plus高级技巧自定义弹幕样式、速度与过滤规则打造专属观影体验 iina plus作为iina的增强版扩展专注于提供强大的弹幕支持功能。通过自定regnetx_002.pycls_in1k模型部署教程从环境配置到NPU加速regnetx_002.pycls_in1k模型部署教程从环境配置到NPU加速 regnetx_002.pycls_in1k是一款轻量级图像分类模型适用于边上一篇Awesome Cheatsheet开发者必备的终极速查表宝库下一篇推荐一款小巧强大的文本编辑器Kilo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考