原文参考我的公众号文章入门级！提取图片主色调

ImageColor 可提取一张图片的主题色、亮堂色、柔和色以及暗淡色四种色彩！体验地址

Features

  • 简略粗犷高效
  • Promise调用
  • 返回数据丰盛
  • 反对返回色彩散布图谱GC，并生成GC图片保留到本地

Usage

import ImageColor from "./index.js";let IC = new ImageColor();IC.analizeImage({    id: "mycanvas",    url: './img.png',    frequency: 20,}).then((res) => {    const { primary, colors, pixels, imageInfo } = res;    console.log("主题色：", primary);    console.log("三种不同亮度的色彩：", colors);    console.log("所有像素", pixels);    console.log("图片信息：", imageInfo);    // 执行该工作的话-如果响应速度会比较慢的话，能够提早渲染，保障以后页面渲染晦涩    setTimeout(() => {        // IC.showGC({ gcid: "graphy_canvas" });        // IC.saveGCImage('色谱.png'); //须要先调用 showGC    }, 0);});

Details

IC.analizeImage 为次要办法，承受一个{对象}作为参数，并以 Promise 的形式返回主题色和三阶亮度色彩

@params

{    id: "mycanvas",    url: './img.png',    frequency: 20,}/*** @param {Object} params* @param params.id String 指定惟一标识，* @param params.url String 要剖析的图片地址* @param params.frequency Number 采样率，值越大，程序执行速度越快，然而会失落大部分像素色彩导致精度会降落，默认 20 */

@returns Promise

{    primary: [r,g,b],    colors: { bright:{...}, soft:{...}, dark:{...} },    pixels: [[r,g,b],...],    imageInfo: {}}其中{...} = {    name: "亮堂色",    color: [],//rgb色彩    yuvOfColor: 0, //亮度    yuvCount: 0,//    yuvPercent: 0, //该亮度在图片中的占比}
IC.showGC({ gcid: "graphy_canvas" }) 办法用于把图片处理过程中的色彩散布渲染到一个指定的 canvas 上，不便察看！

IC.saveGCImage('filename') 办法用于把图谱 canvas 保留为本地图片 (须要先调用 showGC)

简略粗犷实现思路！

没有用到 8 叉树法或者其余支流算法，目前本人这种简略粗犷的操作曾经可能达到预期成果！

  • 1.依照指定采样距离，获取到整张图片的像素点的色彩数据，记作 pixels；

  • 2.第一次遍历 pixels，做以下操作：

    • a.计算所有 pixels 的均匀 avg_rgb；
    • b.计算每一个 pixel 对应的亮度 yuv 值，并依据 yuv 值分三档亮度[亮堂色,柔和色,暗淡色]，将 pixel 的 rgb 退出到对应的亮度色彩的数组中，对这三档色别离累计次数！
  • 3.第二次便当 pixels，拿每一个 pixel 的 rgb 与 avg_rgb 做差，差值在指定范畴内保留进 diffavg_pixels 数组中，否则抛弃！
  • 4.对 diffavg_pixels 求均匀的 diff_avg_rgb，即作为 图片的主题色！
  • 5.对三档亮度的 pixels 数组 别离求出均匀的 rgb，即作为三档亮度色彩！