应用场景:在很多时候,前端开发过程中需要动态的获取图片的主要的颜色值,并根据主色调去调整主题样式的颜色或者模拟出一套配色方案,如图
根据图片,模拟出一套主题配色方案。
实现及原理:以canvas的getImageData()方法为基础,以像素颜色的计算为核心。
我们把一个img标签,放入到canvas当中去,然后使用getImageData方法来获取像素信息:
部分代码:
在控制台中我们可以看到很多数组,对于这张图来说他是有规律的,每四个为一组,每一组为一图片中的一个像素块,比如下标0,1,2,3分别代表着raba()中的r,g,b,a。a代表这块像素中的透明度
教学图片:
在这里我做了一张图片方便大家理解,如果我们将每一个由rgba组成的像素块理解为图片中的一个点,那么由width和height(即x坐标和y坐标)内的像素点就能组成一个完整的图片的一面。
那么rgba中的a也是不可或缺的一部分,我们可以理解为透明度是图片构成中的z坐标,比如在获取npg透明背景图片的主色调的时候,不得不考虑背景透明的地方的处理。
二维的实现——平均值算法(获取主色调):
在平面坐标系中(不考虑透明度的情况下)即只有rgb,我们可以使用canvas的getImageData函数获取所有像素的数据,然后将所有的rgb三值各取平均值即可。
1234 12 112