@dominate-color.js/core

@dominate-color.js/core

一个强大的TypeScript库,用于图像中的颜色检测. 这个 @dominate-color.js/core 软件包提供了识别和从图像源取出主导颜色的基本功能。 图书馆的建设是为了迎合各种使用案例,从创建以色彩为主的美学布局到实施基于您应用中的图像颜色的动态主题.

colorDetection()

这个 colorDetection 函数是 @dominate-color.js/core 软件包,使开发人员能够轻松地检测图像中的颜色。 它接受一个图像源和可选配置参数,返回一个以图像中发现的最主要RGBA颜色的数组解决的许诺.

特征

• 支持各种图像源,包括URL,文件路径和缓冲.
• 提供可配置设置来微调色彩检测.
• 利用高效的算法来快速而精确地提取颜色.

开始

整合前 colorDetection 在您的项目中,最好通过所提供的文档了解如何有效使用该功能。 这个功能的设计是直截了当和灵活的,便于适应你的具体需要.

安装

首先,安装 @dominate-color.js/core 使用 npm, pnpm 或纱线的软件包 :

npm install @dominate-color.js/core
# or
yarn add @dominate-color.js/core

使用量

要在您的工程中使用颜色检测, 请遵循这些步骤 :

1. 从包中导入颜色检测函数 :

import { colorDetection } from '@dominate-color.js/core';

2. 准备你的图像源。 这可以是 URL,本地文件路径,也可以是 ArrayBuffer.
3. (可选)设置您的配置选项。 您可以指定距离方法、 要检测的颜色数字 K 和 COSOR 设置的 Access Control AllowOrigin .
4. 使用您的图像源和可选配置调用颜色检测 () :

    import { colorDetection, type Config } from '@dominate-color.js/core';
     
    const config: Config = {
        distance: 'euclidean', // Choose the 'euclidean' algorithm for color distance calculation
        k: 5, // Detect the top 5 dominant colors
        AccessControlAllowOrigin: '*' // Useful for CORS when fetching images from external URLs
    };

    // Replace `source.url` with the path to your image or any other type supported by the `colorDetection` function when calling it.
    colorDetection(source.url, config)
        .then(colors => {
            console.log('Detected Colors with custom config:', colors);
            updateUIWithColors(colors);
        })
        .catch(error => {
            console.error('Error detecting colors with custom config:', error);
            warnUserSomethingWentWrong(error)
        });