English | Simplified Chinese

@ray-js/image-color-picking

Image color picking Internally obtains the pixel color of the image through a canvas, and then calculates several colors that appear more frequently and are not very close to each other through aggregation algorithms.

Installation

$ npm install @ray-js/image-color-picking
// or
$ yarn add @ray-js/image-color-picking

Usage

Basic Usage

1. Import the ImageColorPicker component and place it on the page. Since the component internally obtains colors through a canvas, a component must be present on the page as the basis for obtaining colors, and the id should be passed as image-color-picking by default.
2. Import the imageColorPicking method and pass in the file path to get the main colors. The pickNum attribute can control the number of main colors extracted.
3. The imageColorPickingDestroy method can clear the cache queue when the component is destroyed.

import {
  imageColorPicking,
  ImageColorPicker,
  chooseCropImageSync,
  imageColorPickingDestroy,
} from '@ray-js/image-color-picking';
import React, { useEffect } from 'react';
import { View } from '@ray-js/ray';

const Demo = () => {
  useEffect(() => {
    return () => {
      // Destroy the component cache queue supported from version 1.1.0
      imageColorPickingDestroy();
    };
  }, []);

  const run = async () => {
    // Call app capability to select local mobile image path
    const path: string = await chooseCropImageSync();
    // Get main colors
    const colors = await imageColorPicking({
      path,
      pickNum: 8,
    });
    console.log(colors, '--obtained colors');
  };

  return (
    <>
      <View onClick={run}>Click to execute</View>
      <ImageColorPicker id="image-color-picking" />
    </>
  );
};

Custom id and Passing Base64 Usage

1. Set different ids such as my-custom through the component mounted on the page. Therefore, when calling the imageColorPicking method, the corresponding selector attribute also needs to be passed to enable the method to access this component instance.
2. Use the readImgSync method to convert the image path from the mobile device into base64 format, and then send it to the internal component for execution using the imageColorPicking method and return the colors.

import {
  imageColorPicking,
  ImageColorPicker,
  chooseCropImageSync,
  readImgSync,
  imageColorPickingDestroy,
} from '@ray-js/image-color-picking';
import React, { useEffect } from 'react';
import { View } from '@ray-js/ray';

const Demo = () => {
  useEffect(() => {
    return () => {
      // Destroy the component cache queue supported from version 1.1.0
      imageColorPickingDestroy();
    };
  }, []);

  const run = async () => {
    // Call app capability to select an image
    const path: string = await chooseCropImageSync();
    // Convert the image in the mobile device into base64
    const fileBase64: string = await readImgSync(path);
    // Get main colors
    const colors = await imageColorPicking({
      base64: fileBase64,
      // Custom id
      selector: '#my-custom',
      // Brighten colors
      isPrimary: false,
      pickNum: 8,
      // Disable color sorting
      isSort: false,
    });
    console.log(colors, '--obtained colors');
  };

  return (
    <>
      <View onClick={run}>Click to execute</View>
      <ImageColorPicker id="my-custom" />
    </>
  );
};

Split Image Color Picking v1.1.0

The splitImage parameter can segment the image for recognition. By default, when passed true, it is 2 rows and 4 columns.

import {
  imageColorPicking,
  ImageColorPicker,
  chooseCropImageSync,
  imageColorPickingDestroy,
} from '@ray-js/image-color-picking';
import React, { useEffect } from 'react';
import { View } from '@ray-js/ray';

const Demo = () => {
  useEffect(() => {
    return () => {
      // Destroy the component cache queue supported from version 1.1.0
      imageColorPickingDestroy();
    };
  }, []);

  const run = async () => {
    const path: string = await chooseCropImageSync();
    const colors = await imageColorPicking({
      path,
      splitImage: {
        // Enable split mode
        cols: 10,
        rows: 10,
      },
    });
    console.log(colors, '--obtained split colors');
  };

  return (
    <>
      <View onClick={run}>Click to execute</View>
      <ImageColorPicker id="image-color-picking" />
    </>
  );
};

Methods and Types

| Parameter | Description | Type | | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | ImageColorPicker | The supporting component for obtaining the image resource color, needs to be used with imageColorPicking | ImgCanvasProps & { id: string } | | imageColorPicking | The supporting method for obtaining the image resource color, needs to be used with ImageColorPicker | (currOptions: ImageColorPickingOption = {}): Promise<string[]> | | chooseCropImageSync | Method to get local images from the mobile device, implemented based on chooseCropImage, wrapped into a promise with additional permission logic | (sourceType?: "album" | "camera"): Promise<string> | | readImgSync | Reads local mobile image resources and converts them into base64 format | (path: string): Promise<string> | | imageColorPickingDestroy v1.1.0 | Destroys the component cache queue | (selector?: string): void |

ImgCanvasProps

| Parameter | Description | Type | Default Value | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------- | | path | Local mobile file path | string | '' | | canvasId | Custom canvas id | string | image-color-picking-canvas | | base64 | Image base64 string | string | - | | pickNum | Number of colors extracted | number | 5 | | isPrimary | Whether to maintain the original color. If false, the component will brighten internal colors when they are too dark | boolean | true | | splitImage v1.1.0 | Whether to split the image for color recognition. When passed true, the default is 2 rows and 4 columns, dividing the image into 8 segments with one color identified for each segment; custom segmentation rules can also be defined | boolean | { cols: number; rows: number; } | - | | onColorsChange | Callback for color changes | (colors: string[]) => void | - |

ImageColorPickingOption

| Parameter | Description | Type | Default Value | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------- | | selector | The id of the component must start with # | string | #image-color-picking | | path | Local mobile file path | string | - | | canvasId | Custom canvas id, automatically appending -canvas suffix based on the selector property | string | image-color-picking-canvas | | base64 | Image base64 string | string | - | | pickNum | Number of colors extracted | number | - | | isPrimary | Whether to maintain the original color. The component will brighten internal colors by default; if turned off, true needs to be passed | boolean | - | | splitImage v1.1.0 | Whether to split the image for color recognition. When passed true, the default is 2 rows and 4 columns, dividing the image into 8 segments with one color identified for each segment; custom segmentation rules can also be defined | boolean | { cols: number; rows: number; } | - | | context | Pass this when using in native mini-programs; no need to pass when using in ray | any | - |