本文首发自 微盟技术中心 微信公众平台~
一、前言
主题色，简而言之，是界面设计中被用作基础配色方案的主要颜色。它是在设计中明确定义的一种核心色彩，用于塑造界面的整体氛围和风格。通过恰当选择和运用主题色，可以 提升界面的可视性和易用性，从而大幅地提升用户体验。提到图像提取主题色，⼤家可能会想到 OpenCV 这种专业的计算机视觉库，其实Javascript 这种轻量级的 脚本语⾔也是可以被⽤来实现该功能。并且相较于其他语⾔，由于其实时性和动态性以及浏览器的原生支持，JS 具有更好的动态响应能⼒以及定制化能力。
二、背景
目前微盟 CRM 会员模块主要支持两种类型的会员卡，分别是等级会员卡以及权益会员卡。商户可以根据不同的应用场景去创建不同的会员方案（成长值等级类型、消费行为等级类型、权益卡以及付费会员），以及对它们配置、管理。满足丰富的业务场景，能帮助商家针对行业对会员进行个性化运营，帮助商家给会员提供更好的服务，提升会员的黏性和忠诚度。 
三、需求分析
解决该问题最重要的便是获取图片的主题色啦，那么我们该如何去获取到一张图片的主题色呢？市场上常用的提取主题色的方案主要为以下几种：
1.基于平均色的方案：这种方法计算图像中所有像素的RGB值的平均值，然后将这个平均值作为主题色。这种方法简单直接，但可能无法捕捉到图像中的主要色调。2.颜色直方图：将图像的颜色分布表示为颜色直方图，然后选择直方图中的峰值作为主题色。这种方法对于多种颜色的图像效果较好，但总体效果较差3.Opencv: 使用 OpenCV 这个强大的计算机视觉库来加载图像，然后使用颜色空间转换和阈值处理来提取特定颜色的部分。但其实 Javascript 也可以被用来实现该功能，并且相较于其他方案，Js 处理的好处如下： 1.客户端控制：无需后端服务器支持，不用处理图像上传/下载等逻辑。2.响应性：在处理尺寸较小的图片（CRM会员卡背景图片限制1M以内）时，具有更好的响应性。3.交互性：可以直接在前端图像上实现交互，例如用户点击图片上的区域来提取特定颜色，或者通过滑块来调整颜色提取的敏感度。
四、需求分析
简而言之，我们的技术方案主要为以下几个步骤：
1.加载图像数据: 使用 Canvas 绘制图像并获取像素数据。2.数据预处理: 对像素数据进行降噪/缩放/去皮等定制化处理。3.生成主题色：采用切割算法（中位切分/八叉树）进行颜色提取。
1、加载图像数据
2.1 降噪
弄明白卷积后我们回过头来讲高斯滤波就容易多了，万变不离其宗，高斯滤波其实就是创造一个符合高斯分布的卷积核并对图像进行卷积计算（对像素的R、G、B值分别计算得出结果），详细步骤不在这里过多阐述，来看下具体的运行效果。 
2.2 去皮
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
function convertToPixelsArray(imgData) { const data = imgData.data; const pixels = []; const [min, max] = [5, 250]; //像素点RGB值不在此范围内的进行过滤 范围可选 for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; // rgb值都在[5, 250]范围内，则不过滤 if (!(Math.min(r, g, b) >= max || Math.max(r, g, b) <= min)) { // 过滤透明度（可选） pixels.push([data[i], data[i + 1], data[i + 2]]); } } return pixels;}3、生成主题色 在我们的项目中，我们主要采用了两种算法：中位切分法和八叉树。这些算法被用于不同的情境，以满足不同的图像处理需求。对于那些需要快速获取主题色，并且对图像细节不太关心的场景，我们选择了中位切分法。这个简单且高效的算法能够帮助用户快速批量地获取图片的主题色。在这种情况下，我们的重点在于迅速处理大量图像，而不需要过多关注图像的微小差异。在那些对细致和真实主题色有更高要求的场景中，八叉树无疑是更好的选择。比如：渐变背景色：八叉树能够创造出更加复杂多样的背景效果，从而使渐变过程更加平滑自然，为视觉体验增添层次感。细致的颜色匹配：八叉树具备实现对图像中不同区域进行精细颜色匹配的能力，从而更好地将主题色与整体设计融合。下面就来介绍一下怎么用 JS 实现这两种算法。
4.1 中位切分法
中位切分其实非常好理解。首先需要各位读者发挥下空间想象能力，将R、G、B想象成三维空间的X、Y、Z轴，这样我们就得到了一个边长为256的立方体盒子，接着把每个像素点当作一个无体积的小球根据其坐标（r,g,b)放入盒子中。 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
function medianCut(pixels) { const colorRange = getColorRange(pixels);// 获取该颜色盒子的RGB范围 const colorBox = new ColorBox(colorRange, pixels.length, pixels); const divisions = 8; // 最大切割次数，在demo中写死 实际项目中使用者可自定义 let [box1, box2] = cutBox(colorBox); // 第一次切割 return queueCut([box1, box2], divisions);}function queueCut(queue, num) { let isSmallBox = false; while (queue.length < num && !isSmallBox) { const denselyBox = queue.shift(); const resultBox = cutBox(denselyBox); // 只返回一个盒子时，说明最长边已经小于阀值 if (resultBox.length === 1) { isSmallBox = true; queue.unshift(resultBox); return; } queue = insertValueInSortedArray(queue, resultBox); // 插值排序 } return queue;}function cutBox(colorBox) { const { colorRange, total, rgbArr } = colorBox; const cutSide = colorBox.getCutSide(colorRange); if (cutSide === -1) return colorBox; // 当切割边为-1即切割范围小于阀值时 停止切割 const colorInCutSide = rgbArr.map((item) => item[cutSide]); // 统计出各个值的数量 let medianColor = getMedianColor(colorInCutSide, total); // 此处做简易处理，实际处理中需考虑中位数值的像素数量是否过大 if (medianColor === colorRange[cutSide][0]) { medianColor++; } // 防止空切 const newRange = getCutRange(colorRange, cutSide, medianColor); // 获取切割后的两个盒子的RGB范围 const dividedPixels = dividePixel(rgbArr, cutSide, medianColor); // 分割像素到两个盒子中并返回... return [boxOne, boxTwo];}看到这里是否对中位切分算法有了更深的理解？在实际运用中，要注意切割次数和最小子空间的设定会影响到结果的准确性。
3.2 八叉树
我知道有些同学看到这个名字的时候已经开始头疼了。但请先别急，听我慢慢讲解先用一句话简单概况，八叉树（Octree）是一种用于描述三维空间的树状数据结构，它是一种递归的树形数据结构，可以将三维空间划分为八个等分的小立方体（子节点），每个空间可以进一步细分为八个子空间，以此类推。八叉树怎么和RGB颜色盒子连接起来呢？ 首先，要将三维空间划分成八个等分的小立方体，我们需要沿着每条轴的中点切割，确保每个子空间的边长相等，从而确保每个立方体的体积相等。比如将一座葫芦山（完整颜色盒子）用八叉树切分后会得到八种不同颜色的葫芦娃； 
知道了怎么将像素数据存入八叉树结构后，我们就可以开始提取主题色啦。 首先，在八叉树最后一层结构中，每个节点表示的是一个具体的RGB值，我们称其为叶子节点。与此同时，在最后一层中每个兄弟节点的RGB差值范围为1，也就是说该父节点的所有子节点的颜色都十分类似。我们可以发现，在八叉树较深层级中，兄弟节点的RGB差值范围较小，公式为diff=2^(8-n)，其中diff为RGB差值，n为层数。那么我们可以利用这个特性来合并相似元素从而更有效地表示数据，当一个颜色盒子中存有过多小盒子（子节点）与葫芦娃（像素）的时候，丢弃其中所有小盒子，并保留所有葫芦娃至父盒子中，从而进行空间压缩，减少空间复杂度。为什么要进行合并呢？在介绍中位切分法的篇幅中，我们提到，提取主题色其实就是找到密度最集中的几个簇，被合并的盒子的像素都为那些像素集中且密度较大的盒子。这便是我们所需找到的簇，也就是主题色。如果将所有像素全都储存在八叉树结构后，才进行合并叶子节点的步骤的话，这无疑极大的增加了空间复杂度，所以我们设定了一个阀值N（可自定义），一般来说，N越大，得到的结果越精确，但时间复杂度与空间复杂也会同步上升。在将像素插入八叉树结构的过程中，当叶子节点数量超过N时，我们便会将挂有最多叶子节点的父节点进行合并操作。合并后，将该父节点设为叶子节点，且之后所有在该分支上的像素均挂载至该父节点上。当所有的像素数据遍历结束后，我们就可以得到N个叶子节点了。我们需要根据每个叶子节点上的像素数量对其进行排序，排名前列的便是我们所需要的主题色啦。以上介绍了中值切分法和八叉树两种算法的实现中位切分法适用于资源有限且需要快速提取图像主题色的场景，尤其适合实时或大规模处理需求。它的简单性和计算效率使其在这些场景下成为很好的选择，尤其是当主要目标是从图像中快速捕捉主题颜色而不需要过多考虑细节和渐变色时。比如当商户只需要快速批量地获取图片的主题色，且不关心主题色的精度时而八叉树在动态适应性和处理颜色渐变方面具有优势，适用于需要保持细节不和平滑度的图像颜色提取任务，但其算法复杂度较高，内存消耗较大。主要应用场景如下:并且该两种算法我们都会放在 Web Worker 中处理，以提高页面性能和用户体验，同时保持主线程的渲染进程不受影响。
五、成果
以上就是这篇文章的总体内容了，通过 Canvas，可以在 Web 前端对图像进行操作和渲染。结合切割算法，可以实现类似的图像颜色提取功能。这种方法尤其适合需要在用户界面中实时显示颜色提取结果的交互式应用。并且通过对于 Web Worker的一个使用，避免了对主线程渲染的影响，从而提升了用户体验。
接下来我们看一下会员卡接入该功能之后的一个整体效果吧。会员权益卡接入该功能后，当用户上传完卡面图片，便会自动提取其中的主题色。这样，用户可以直接选择提取出的色彩作为主题色应用，以确保卡面图片和主题色的协调性。具体效果如下所示： 
六、参考资料
1、中位切分法 - 简书（https://www.jianshu.com/p/a2cc58eba182）2、三维数据存储-OcTree八叉树（https://sunjiadai.xyz/blog/2019/06/25/OcTree%E5%85%AB%E5%8F%8...）3、Wei-dong, C., & Wei, D. (2008, December). An improved median-cut algorithm of color image quantization. In 2008 International Conference on Computer Science and Software Engineering (Vol. 2, pp. 943-946). IEEE.4、Yamaguchi, K., Kunii, T., Fujimura, K., & Toriya, H. (1984). Octree-related data structures and algorithms. IEEE Computer Graphics and Applications, 4(01), 53-59.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。