Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。

应用场景:在很多时候,前端开发过程中需要动态的获取图片的主要的颜色值,并根据主色调去调整主题样式的颜色或者模拟出一套配色方案,如图


Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第1张图片
根据png图片颜色,动态设置背景颜色或者文字颜色,使其提高对比度提高内容的可读性  

根据图片,模拟出一套主题配色方案。


Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第2张图片

实现及原理:以canvas的getImageData()方法为基础,以像素颜色的计算为核心。

        我们把一个img标签,放入到canvas当中去,然后使用getImageData方法来获取像素信息:

部分代码:

Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第3张图片

        在控制台中我们可以看到很多数组,对于这张图来说他是有规律的,每四个为一组,每一组为一图片中的一个像素块,比如下标0,1,2,3分别代表着raba()中的r,g,b,a。a代表这块像素中的透明度

Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第4张图片

教学图片:

        在这里我做了一张图片方便大家理解,如果我们将每一个由rgba组成的像素块理解为图片中的一个点,那么由width和height(即x坐标和y坐标)内的像素点就能组成一个完整的图片的一面。

       那么rgba中的a也是不可或缺的一部分,我们可以理解为透明度是图片构成中的z坐标,比如在获取npg透明背景图片的主色调的时候,不得不考虑背景透明的地方的处理。

Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第5张图片


二维的实现——平均值算法(获取主色调):

        在平面坐标系中(不考虑透明度的情况下)即只有rgb,我们可以使用canvas的getImageData函数获取所有像素的数据,然后将所有的rgb三值各取平均值即可。

        1234 12112


Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第6张图片

        以上方法缺点在于:无法计算透明背景的主色调,主色调会被png图片透明区域的大小所影响。优点就是简单明了,方便快捷。


三维坐标实现——中位切分法(可准确获取png图片的主色调):

        中位切分算法的原理很简单直接,将图像颜色看作是色彩空间中的长方体(VBox),从初始整个图像作为一个长方体开始,将RGB中最长的一边从颜色统计的中位数一切为二,使得到的两个长方体所包含的像素数量相同,重复上述步骤,直到最终切分得到长方体的数量等于主题颜色数量为止。

所以这里就不去大篇幅的解释如何实现的,直接献上插件。插件下载地址:插件下载

插件使用方法:

引入插件并且使用:

//html中代码

var b = new ColorThief();

var c = b.getColor(imgs,10,10);


var c = b.getColorAsync(imgs.src,asd,10)//第一个参数是图片src,第二个参数是自定义的回调函数,第三个参数是质量,质量越大计算越粗糙

//html中回调函数

function asd(data,elementImg){

   console.log('zhuR',data)

   /*data对象中

   *MainColoruse表示图片的主色调

   *Embellish图片配色方案

    *Complementary图片互补色,大多用于设置字体颜色与背景突出显示。

   */

   console.log(elementImg)

}



Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第7张图片

效果1:这里有一张npg透明背景的图片,经计算不会将npg透明的背景计算在内。

Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第8张图片
npg图
Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第9张图片
console
Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第10张图片
色值


效果2:一张照片的配色方案。

Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第11张图片
图片


Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。_第12张图片
配色

插件下载地址:插件下载

你可能感兴趣的:(Js、canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。)