拓冰网站定制 
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载PixelBox.averageColor是 FAST 生态中microsoft/fast-colors颜色量化模块里PixelBox类的核心只读属性它以ColorRGBA64类型承载一个 RGB 色彩盒子的代表色。本文以 PixelBox.averageColor 属性文档 为骨架结合同目录下 PixelBox 类、Histogram、QuantizeConfig 等 API 文档完整梳理 averageColor 在图片 → 直方图 → 颜色盒 → 量化调色板链路中的位置、生成方式与调参影响。读完后你将理解 Modified Median Cut 量化算法中代表色的计算逻辑并能直接上手配置quantize()提取图像主色调。PixelBox.averageColor一个颜色盒子的代表色在 1.x API 参考文档中该属性的声明极其简洁readonly averageColor: ColorRGBA64;所属类PixelBox官方描述为Represents a range of colors in RGB color space表示 RGB 色彩空间中的一个颜色范围。属性修饰符readonly即该值在构造时确定、之后不可变说明它是盒子内容的汇总性快照而不是可随意改写的状态。返回类型ColorRGBA64一个 RGBA 四通道均为 64 位精度的颜色类通道值域为[0,1]例如new ColorRGBA64(1, 0, 0, 1)即纯红色。从类的命名与数据结构推断averageColor是对当前PixelBox所覆盖的整个颜色范围内像素颜色求平均得到的汇总色。在量化算法的语境里它就是这一个色彩盒子最终对外呈现的颜色代表。量化流程的核心目的正是把成百上千种相近颜色压缩成一个盒子再用盒子上的代表色去近似还原整片区域的颜色。从直方图到颜色盒averageColor 的诞生环境averageColor不是凭空出现的它的宿主PixelBox由构造函数直接绑定一张全局直方图与一组 RGB 边界。见 PixelBox 构造函数文档constructor( globalHistogram: Histogram, minRed: number, maxRed: number, minGreen: number, maxGreen: number, minBlue: number, maxBlue: number );各参数含义参数类型说明globalHistogramHistogram整张源图像的全局颜色直方图盒子内像素统计均来自它minRed/maxRednumber红色通道的盒子边界含边界minGreen/maxGreennumber绿色通道的盒子边界minBlue/maxBluenumber蓝色通道的盒子边界也就是说一个PixelBox RGB 三维颜色空间中的一个轴对齐长方体 指向全局直方图的引用。盒子内部有多少像素、平均色是什么都由这对边界与直方图共同决定。作为盒子的其他只读属性见 PixelBox 类文档averageColor与它们的关系pixelCount盒子内像素总数是代表色的权重基础colorVolume盒子的颜色体积RGB 三通道范围的乘积与像素数一起决定后续排序rangeRed/rangeGreen/rangeBlue各通道跨度即max - minglobalHistogram构造时传入的全局直方图引用。一个值得注意的细节averageColor是按像素加权的汇总色而非盒子几何中心的颜色——盒子内部颜色的数量多少会直接影响平均值这也是它能在量化结果中近似还原原图观感的原因。直方图像素从8 位压到5 位的统计基础Histogram 类文档 说明了 averageColor 依赖的底层数据如何产生对每一种可能的颜色统计源图像中有多少像素命中该颜色。关键点是significantBits如果significantBits小于 8每个通道红、绿、蓝都会按位数压缩。默认值 5 时每个通道从 8 位0-255压到 5 位0-31原本不同的颜色会被合并统计。这意味着直方图统计的颜色粒度是粗糙化的RGB 三通道各取前 5 个有效位组成 32×32×32 个统计桶。文档同时给出两个限制前提内存占用按4 * 2^(3 * significantBits)增长significantBits取 8 时需要 64 MB 的直方图若源图像超过 2^32 个同色像素例如 65536×65536 的正方形图像代码会失效。PixelBox及其averageColor正是构建在这张压缩后的直方图之上——边界以 0-31 的桶编号表示像素计数与平均色的计算也都读取这套数据。量化链路PixelBox 如何被反复切分averageColor的一生贯穿于整条量化链路。入口是 quantize() 函数export declare function quantize( source: PixelBlob, config?: QuantizeConfig ): QuantizedColor[];它把 PixelBlob 中的图像像素压缩为一小组颜色同目录下还有可直接操作直方图的 quantizeHistogram()便于复用直方图、用不同配置多次量化。两者的算法基础都是 Modified Median Cut Quantization改进型中位数切分量化源自 Leptonica 的colorquant2.c实现见 fast-colors.md 函数列表描述。整个流程可以概括为读取图像像素按significantBits压缩后构建Histogram以初始边界全 RGB 空间创建一个PixelBox其pixelCount为直方图总像素数反复调用modifiedMedianCut把最大的盒子一分为二直到达到目标调色板大小每个最终存活的PixelBox通过其averageColor对外提供代表色。modifiedMedianCut切在中位数两侧的中点modifiedMedianCut 属性文档 给出了切割方法最关键的实现说明modifiedMedianCut: () [PixelBox | null, PixelBox | null];它尝试将当前 PixelBox 表示的颜色范围分成两个更小的 PixelBox。与教科书式的朴素中位切分不同它并不直接在中位切而是先找到中位位置沿某个通道以像素分布为基准在中位两侧的较大半边中点处下刀。这样做的效果是面积较小但颜色集中的区域能在最终输出中保留更多代表色避免小色区被大色区吞掉。文档还注明其算法实现参考了 Leptonica 的 Modified Median Cut Quantization 源码colorquant2.c。每次调用返回一个二元组[PixelBox | null, PixelBox | null]切不开的盒子返回null量化循环据此决定是否继续细分。可以推断当盒子无法再切时它便成为最终调色板中的一员其averageColor即被提取为量化结果中的一种颜色。量化结果与配置哪些参数影响 averageColor切割与平均色计算并非无脑进行全部受 QuantizeConfig 控制完整参数如下参数类型说明significantBitsnumber范围[1,8]控制直方图压缩位数与内存见上文公式targetPaletteSizenumber期望输出调色板大小极端情况如图片颜色极少实际输出可能偏少fractionByPopulationnumber最终调色板中前fractionByPopulation * targetPaletteSize个颜色仅按像素数population排序其余颜色按population * colorVolume排序让高对比度的小色区也能出现在输出中maxIterationsnumber迭代超过该次数即中止并返回当前结果用于兜底极端输入pixelSkippingnumber采样间隔值越低 CPU 负载越高、纳入计算的像素越多isHistogramPixelValid((pixel: number[]) boolean) \| null直方图阶段的像素过滤谓词入参为[0,255]范围的 RGBA 数组例如可排除接近纯白或透明的像素isBoxValid((box: PixelBox) boolean) \| null盒子阶段的筛选谓词可直接依据PixelBox的属性如pixelCount剔除不想要的盒子这些参数中significantBits直接影响直方图粒度从而影响平均色的精度isBoxValid可以直接决定某个盒子的averageColor能否进入最终结果fractionByPopulation则改变了小色区代表色的出场机会——它们共同塑造了最终QuantizedColor[]里每种颜色的质量。仓库提供了默认值变量 defaultQuantizeConfig类型即为QuantizeConfig不传配置时量化直接使用它。读取代表色QuantizedColor 与 ColorRGBA64quantize() 返回的是 QuantizedColor 数组每个元素包含三个字段color: ColorRGBA64量化后的颜色colorVolume: number该颜色来源盒子的体积pixelCount: number该颜色覆盖的像素数。从PixelBox.averageColor类型ColorRGBA64与QuantizedColor.color类型同为ColorRGBA64的数据结构对应关系看可以推断量化输出的每种颜色即来自对应最终PixelBox的averageColor。因此读懂averageColor就等同于理解了整个调色板代表色的来源。拿到ColorRGBA64后可借助其公开方法见 ColorRGBA64 类文档输出为可用的字符串形式toStringHexRGB()生成#RRGGBB、toStringHexRGBA()生成#RRGGBBAA、toStringHexARGB()生成#AARRGGBB、toStringWebRGB()/toStringWebRGBA()生成 CSS 的rgb()/rgba()写法roundToPrecision(precision)可用于控制输出精度直接满足主题色、渐变配色等前端场景的落地需要。实战提取一张图片的主色调基于 1.x API 文档中的公开签名一个最小可用的提取流程如下函数均已在 fast-colors.md 函数清单中确认import { loadImageData, quantize, defaultQuantizeConfig, QuantizeConfig, } from microsoft/fast-colors; // 1. 将图片URL 或 File 等可加载源读取为 ImageData const imageData await loadImageData(source); // 2. 用默认配置量化得到一组代表色 const palette quantize(imageData, defaultQuantizeConfig); // 3. 按像素数降序输出前几个主色 const topColors palette .slice() .sort((a, b) b.pixelCount - a.pixelCount) .map(q q.color.toStringHexRGB()); console.log(topColors);若需要更精细的控制可自定义配置const config: QuantizeConfig { ...defaultQuantizeConfig, significantBits: 6, // 直方图更细64×64×64内存约 4*2^18 字节 targetPaletteSize: 8, // 想要 8 个主色 isHistogramPixelValid: pixel // 排除 alpha 太低近乎透明的像素 pixel[3] 0.5 * 255, isBoxValid: box box.pixelCount 100, // 扔掉像素过少的盒子 }; const customPalette quantize(imageData, config);注意两点实践约束依据 QuantizeConfig 文档significantBits上限为 8取 8 时直方图需要 64 MB 内存默认的 5 是内存与精度的均衡点targetPaletteSize是期望值极端输入如纯色图下实际返回数量可能少于该值。小结PixelBox.averageColor虽然只是一行readonly averageColor: ColorRGBA64的声明背后却承载着 FASTmicrosoft/fast-colors颜色量化的核心语义一个 RGB 颜色盒子的加权代表色。理解它需要串起整条链路——Histogram 的位数压缩、PixelBox 的边界定义、modifiedMedianCut 的中位两侧切分策略以及 QuantizeConfig 的七项配置对谁能进入最终调色板的裁决。把握住 averageColor就把握住了从任意图片提取高保真主色调的钥匙其余 FAST 组件如设计系统中的配色生成也都建立在这套颜色能力之上。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST 颜色系统详解microsoft/fast-colors 中 QuantizedColor.color 属性与图像调色板量化FAST 颜色系统详解microsoft/fast colors 中 QuantizedColor.color 属性与图像调色板量化 本文围绕 micro前端UI组件CodexBar 后台浏览器启动回归修复深度解析Claude MCP-only 钥匙串的 fail-closed 防护机制CodexBar 后台浏览器启动回归修复深度解析Claude MCP only 钥匙串的 fail closed 防护机制 导读 本文聚焦 CodexBar前端UI组件Zola Inky 主题使用与定制指南安装配置、模板钩子与响应式图片实战Zola Inky 主题使用与定制指南安装配置、模板钩子与响应式图片实战 Zola Inky 是收录于 Zola 官方主题库的一款优雅而低调elegan前端UI组件上一篇EmotiVoice推理优化ONNX格式转换提升CPU推理速度3倍终极指南下一篇GASShooter项目架构分析模块化设计、代码组织与最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 FAST 颜色量化核心：深入解析 @microsoft/fast-colors 的 PixelBox.averageColor 代表色
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载PixelBox.averageColor是 FAST 生态中microsoft/fast-colors颜色量化模块里PixelBox类的核心只读属性它以ColorRGBA64类型承载一个 RGB 色彩盒子的代表色。本文以 PixelBox.averageColor 属性文档 为骨架结合同目录下 PixelBox 类、Histogram、QuantizeConfig 等 API 文档完整梳理 averageColor 在图片 → 直方图 → 颜色盒 → 量化调色板链路中的位置、生成方式与调参影响。读完后你将理解 Modified Median Cut 量化算法中代表色的计算逻辑并能直接上手配置quantize()提取图像主色调。PixelBox.averageColor一个颜色盒子的代表色在 1.x API 参考文档中该属性的声明极其简洁readonly averageColor: ColorRGBA64;所属类PixelBox官方描述为Represents a range of colors in RGB color space表示 RGB 色彩空间中的一个颜色范围。属性修饰符readonly即该值在构造时确定、之后不可变说明它是盒子内容的汇总性快照而不是可随意改写的状态。返回类型ColorRGBA64一个 RGBA 四通道均为 64 位精度的颜色类通道值域为[0,1]例如new ColorRGBA64(1, 0, 0, 1)即纯红色。从类的命名与数据结构推断averageColor是对当前PixelBox所覆盖的整个颜色范围内像素颜色求平均得到的汇总色。在量化算法的语境里它就是这一个色彩盒子最终对外呈现的颜色代表。量化流程的核心目的正是把成百上千种相近颜色压缩成一个盒子再用盒子上的代表色去近似还原整片区域的颜色。从直方图到颜色盒averageColor 的诞生环境averageColor不是凭空出现的它的宿主PixelBox由构造函数直接绑定一张全局直方图与一组 RGB 边界。见 PixelBox 构造函数文档constructor( globalHistogram: Histogram, minRed: number, maxRed: number, minGreen: number, maxGreen: number, minBlue: number, maxBlue: number );各参数含义参数类型说明globalHistogramHistogram整张源图像的全局颜色直方图盒子内像素统计均来自它minRed/maxRednumber红色通道的盒子边界含边界minGreen/maxGreennumber绿色通道的盒子边界minBlue/maxBluenumber蓝色通道的盒子边界也就是说一个PixelBox RGB 三维颜色空间中的一个轴对齐长方体 指向全局直方图的引用。盒子内部有多少像素、平均色是什么都由这对边界与直方图共同决定。作为盒子的其他只读属性见 PixelBox 类文档averageColor与它们的关系pixelCount盒子内像素总数是代表色的权重基础colorVolume盒子的颜色体积RGB 三通道范围的乘积与像素数一起决定后续排序rangeRed/rangeGreen/rangeBlue各通道跨度即max - minglobalHistogram构造时传入的全局直方图引用。一个值得注意的细节averageColor是按像素加权的汇总色而非盒子几何中心的颜色——盒子内部颜色的数量多少会直接影响平均值这也是它能在量化结果中近似还原原图观感的原因。直方图像素从8 位压到5 位的统计基础Histogram 类文档 说明了 averageColor 依赖的底层数据如何产生对每一种可能的颜色统计源图像中有多少像素命中该颜色。关键点是significantBits如果significantBits小于 8每个通道红、绿、蓝都会按位数压缩。默认值 5 时每个通道从 8 位0-255压到 5 位0-31原本不同的颜色会被合并统计。这意味着直方图统计的颜色粒度是粗糙化的RGB 三通道各取前 5 个有效位组成 32×32×32 个统计桶。文档同时给出两个限制前提内存占用按4 * 2^(3 * significantBits)增长significantBits取 8 时需要 64 MB 的直方图若源图像超过 2^32 个同色像素例如 65536×65536 的正方形图像代码会失效。PixelBox及其averageColor正是构建在这张压缩后的直方图之上——边界以 0-31 的桶编号表示像素计数与平均色的计算也都读取这套数据。量化链路PixelBox 如何被反复切分averageColor的一生贯穿于整条量化链路。入口是 quantize() 函数export declare function quantize( source: PixelBlob, config?: QuantizeConfig ): QuantizedColor[];它把 PixelBlob 中的图像像素压缩为一小组颜色同目录下还有可直接操作直方图的 quantizeHistogram()便于复用直方图、用不同配置多次量化。两者的算法基础都是 Modified Median Cut Quantization改进型中位数切分量化源自 Leptonica 的colorquant2.c实现见 fast-colors.md 函数列表描述。整个流程可以概括为读取图像像素按significantBits压缩后构建Histogram以初始边界全 RGB 空间创建一个PixelBox其pixelCount为直方图总像素数反复调用modifiedMedianCut把最大的盒子一分为二直到达到目标调色板大小每个最终存活的PixelBox通过其averageColor对外提供代表色。modifiedMedianCut切在中位数两侧的中点modifiedMedianCut 属性文档 给出了切割方法最关键的实现说明modifiedMedianCut: () [PixelBox | null, PixelBox | null];它尝试将当前 PixelBox 表示的颜色范围分成两个更小的 PixelBox。与教科书式的朴素中位切分不同它并不直接在中位切而是先找到中位位置沿某个通道以像素分布为基准在中位两侧的较大半边中点处下刀。这样做的效果是面积较小但颜色集中的区域能在最终输出中保留更多代表色避免小色区被大色区吞掉。文档还注明其算法实现参考了 Leptonica 的 Modified Median Cut Quantization 源码colorquant2.c。每次调用返回一个二元组[PixelBox | null, PixelBox | null]切不开的盒子返回null量化循环据此决定是否继续细分。可以推断当盒子无法再切时它便成为最终调色板中的一员其averageColor即被提取为量化结果中的一种颜色。量化结果与配置哪些参数影响 averageColor切割与平均色计算并非无脑进行全部受 QuantizeConfig 控制完整参数如下参数类型说明significantBitsnumber范围[1,8]控制直方图压缩位数与内存见上文公式targetPaletteSizenumber期望输出调色板大小极端情况如图片颜色极少实际输出可能偏少fractionByPopulationnumber最终调色板中前fractionByPopulation * targetPaletteSize个颜色仅按像素数population排序其余颜色按population * colorVolume排序让高对比度的小色区也能出现在输出中maxIterationsnumber迭代超过该次数即中止并返回当前结果用于兜底极端输入pixelSkippingnumber采样间隔值越低 CPU 负载越高、纳入计算的像素越多isHistogramPixelValid((pixel: number[]) boolean) \| null直方图阶段的像素过滤谓词入参为[0,255]范围的 RGBA 数组例如可排除接近纯白或透明的像素isBoxValid((box: PixelBox) boolean) \| null盒子阶段的筛选谓词可直接依据PixelBox的属性如pixelCount剔除不想要的盒子这些参数中significantBits直接影响直方图粒度从而影响平均色的精度isBoxValid可以直接决定某个盒子的averageColor能否进入最终结果fractionByPopulation则改变了小色区代表色的出场机会——它们共同塑造了最终QuantizedColor[]里每种颜色的质量。仓库提供了默认值变量 defaultQuantizeConfig类型即为QuantizeConfig不传配置时量化直接使用它。读取代表色QuantizedColor 与 ColorRGBA64quantize() 返回的是 QuantizedColor 数组每个元素包含三个字段color: ColorRGBA64量化后的颜色colorVolume: number该颜色来源盒子的体积pixelCount: number该颜色覆盖的像素数。从PixelBox.averageColor类型ColorRGBA64与QuantizedColor.color类型同为ColorRGBA64的数据结构对应关系看可以推断量化输出的每种颜色即来自对应最终PixelBox的averageColor。因此读懂averageColor就等同于理解了整个调色板代表色的来源。拿到ColorRGBA64后可借助其公开方法见 ColorRGBA64 类文档输出为可用的字符串形式toStringHexRGB()生成#RRGGBB、toStringHexRGBA()生成#RRGGBBAA、toStringHexARGB()生成#AARRGGBB、toStringWebRGB()/toStringWebRGBA()生成 CSS 的rgb()/rgba()写法roundToPrecision(precision)可用于控制输出精度直接满足主题色、渐变配色等前端场景的落地需要。实战提取一张图片的主色调基于 1.x API 文档中的公开签名一个最小可用的提取流程如下函数均已在 fast-colors.md 函数清单中确认import { loadImageData, quantize, defaultQuantizeConfig, QuantizeConfig, } from microsoft/fast-colors; // 1. 将图片URL 或 File 等可加载源读取为 ImageData const imageData await loadImageData(source); // 2. 用默认配置量化得到一组代表色 const palette quantize(imageData, defaultQuantizeConfig); // 3. 按像素数降序输出前几个主色 const topColors palette .slice() .sort((a, b) b.pixelCount - a.pixelCount) .map(q q.color.toStringHexRGB()); console.log(topColors);若需要更精细的控制可自定义配置const config: QuantizeConfig { ...defaultQuantizeConfig, significantBits: 6, // 直方图更细64×64×64内存约 4*2^18 字节 targetPaletteSize: 8, // 想要 8 个主色 isHistogramPixelValid: pixel // 排除 alpha 太低近乎透明的像素 pixel[3] 0.5 * 255, isBoxValid: box box.pixelCount 100, // 扔掉像素过少的盒子 }; const customPalette quantize(imageData, config);注意两点实践约束依据 QuantizeConfig 文档significantBits上限为 8取 8 时直方图需要 64 MB 内存默认的 5 是内存与精度的均衡点targetPaletteSize是期望值极端输入如纯色图下实际返回数量可能少于该值。小结PixelBox.averageColor虽然只是一行readonly averageColor: ColorRGBA64的声明背后却承载着 FASTmicrosoft/fast-colors颜色量化的核心语义一个 RGB 颜色盒子的加权代表色。理解它需要串起整条链路——Histogram 的位数压缩、PixelBox 的边界定义、modifiedMedianCut 的中位两侧切分策略以及 QuantizeConfig 的七项配置对谁能进入最终调色板的裁决。把握住 averageColor就把握住了从任意图片提取高保真主色调的钥匙其余 FAST 组件如设计系统中的配色生成也都建立在这套颜色能力之上。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST 颜色系统详解microsoft/fast-colors 中 QuantizedColor.color 属性与图像调色板量化FAST 颜色系统详解microsoft/fast colors 中 QuantizedColor.color 属性与图像调色板量化 本文围绕 micro前端UI组件CodexBar 后台浏览器启动回归修复深度解析Claude MCP-only 钥匙串的 fail-closed 防护机制CodexBar 后台浏览器启动回归修复深度解析Claude MCP only 钥匙串的 fail closed 防护机制 导读 本文聚焦 CodexBar前端UI组件Zola Inky 主题使用与定制指南安装配置、模板钩子与响应式图片实战Zola Inky 主题使用与定制指南安装配置、模板钩子与响应式图片实战 Zola Inky 是收录于 Zola 官方主题库的一款优雅而低调elegan前端UI组件上一篇EmotiVoice推理优化ONNX格式转换提升CPU推理速度3倍终极指南下一篇GASShooter项目架构分析模块化设计、代码组织与最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考