前言去年我有一个想法。通过提取画面的主题色，与画面形成身临其境的视觉效果，营造和谐一致的感觉。我用了一个星期的时间，通过客户端和服务端两种方式实现了这个功能。这两种方法都有自己的优点和缺点。通常，主题颜色的提取是在服务器上完成的。客户端将需要处理的图片以链接或id的形式提供给服务器，服务器通过运行相应的算法提取主题色，然后返回相应的结果。这样可以满足大部分展示场景，但是对于需要根据用户“定制”和“生成”的图片，这个方法有上传图片---->服务器计算---->返回结果时间的方法，等待时间可能会更长。在客户端实现中，手机浏览器的兼容性是一件很痛苦的事情。上面有点麻烦。简单来说，在大多数情况下，建议选择服务器来实现。在用户实时定制和图像生成的情况下，可以选择颜色需求的提取和移动端来实现。这篇文章给大家分享一下客户端的实现方案：目前提取图像颜色最常用的主题色提取算法有：最小差分法、中值分割法、八叉树算法、聚类法、颜色建模法、等等，这里我选择了中值切割的方法来实现。mid-bitsegmentation的思想通常是图像处理中降低图像位深度的一种算法，可以用来将高位图像转换为低位图像，比如转换24位的图像图像到8位图像。我们也可以用它来提取图片的主题色。其原理是将图像的每个像素点的颜色看成是三维空间中以R、G、B为坐标轴的一个点。由于三种颜色的取值范围是0~255，所以图像中的颜色分布在这个颜色立方体中，如下图所示：从初始的整幅图像开始为一个长方体，然后将其最长的边进行划分RGB从颜色统计的中位数一分为二，使得得到的两个长方体所包含的像素个数相同，如下图所示：重复以上步骤，直到最后分割得到的长方体个数等于主题颜色的数量，最后取每个长方体的中点。在实际使用中，如果只按中点切，会出现某些长方体体积大但像素数少的情况。解决方法是在切割前先对长方体进行优先排序，排序系数为体积*像素数。这样就可以基本解决这类问题。效果代码首先创建一个canvas容器，将图片绘制到容器中。使用getImageData方法获取rgba。查看getImageData通过中值分割算法进行切分，提取颜色过滤掉相似的颜色。color.vue(以下代码为VUE3.0语法)
