原文参考我的公众号文章入门级!提取图片主色调
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,即作为三档亮度色彩!