关于javascript:拿来吧你图片主色调

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

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，即作为三档亮度色彩！