是 image color extraction 库的使用示例
git clone [email protected]:xiong35/image-color-extraction-demo.git
cd image-color-extraction-demo
npm install
npm start
利用 canvas 提取给定图片的主要颜色
- 用八叉树算法提取主色 🎄, 更快更强! 🚀
- 纯 ts 编写 🤸♂️
- 有详细的注释和文档 📜
- 暴露出处理颜色的实用函数 🛠
- 可自定义程度高 🔧
yarn add image-color-extraction
## 或者
npm i image-color-extraction
import { ColorExtractor } from "image-color-extraction";
const extractor = new ColorExtractor();
extractor
// 可以改成 1.jpg, 2.jpg and 4.jpg 试试😏
.extractColor("http://blog.xiong35.cn/color-extract/3.jpg")
.then(() => {
console.log(extractor.colors);
/*
[
{color: '#383143', count: 296014},
{color: '#d6bca9', count: 87642},
{color: '#a35560', count: 58061},
{color: '#d39470', count: 18149},
{color: '#666187', count: 13415},
{color: '#9e6d8c', count: 12094},
]
*/
console.log(extractor.chooseReadableColor());
/*
['#383143', '#d6bca9']
*/
});
主类: ColorExtractor
:
type Config = {
/**
* compress the given image to get faster speed\
* a `400 * 600` image * rate of 0.5 => a `200 * 300` image\
* the speed will be 4 times faster than before compression\
* default to 0.2
*/
compresionRate: number;
/**
* reduce the color of a image to this count\
* (e.g. set topColorCount to 4 to extract the top 4 colors)\
* default to 6
*/
topColorCount: number;
/**
* set the max time for a image to load\
* if a image is not loaded after this time the extraction will fail and the pixels will all be #000000\
* set to non-positive value to disable timeout\
* default to `1000 * 10`
*/
timeout: number;
};
const defaultConfig: Config = {
compresionRate: 0.2,
topColorCount: 6,
timeout: 1000 * 10,
};
export declare class ColorExtractor {
/** read the extracted colors from here */
colors?: ColorInfo[];
constructor(config?: Partial<Config>);
/**
* reset part of the entity's config(only overide the given parts)
* @param config part of the new config
*/
setConfig(config: Partial<Config>): void;
/**
* extract color of given image url
* @param image image url
*/
extractColor(image: string): Promise<ColorInfo[]>;
/**
* extract color of given image element
* @param image HTML image element
*/
extractColor(image: HTMLImageElement): Promise<ColorInfo[]>;
/**
* **after** extracted colors, choose the front ground color and background color within them
* @returns `[bgColor, frontColor]`
*/
chooseReadableColor(): string[];
}
declare type ColorInfo = {
color: string;
count: number;
};
工具函数:
export declare function rgbToHex([r, g, b]: PixelData): string;
/**
* @param hex 7 char hex string, e.g. "#ffffff"
* @returns [r, g, b]
*/
export declare function hexToRgb(hex: string): number[];
导出声明:
export { ColorExtractor } from "./ColorExtractor";
export { hexToRgb, rgbToHex } from "./utils";
happy hacking!