在 React JS 中获取图像的主色

Question

我正在尝试使用此repo从加载图像中获取主色。

这是我的尝试：

import React, { useState } from 'react';
import { ColorExtractor } from 'react-color-extractor';

const App = () => {

    const [colors, setColors] = useState([]);
    const getColors = color => {
        setColors([...colors, ...color])
    }

    const ColorGet = (file) => {
        //file.preview = blob
        return <>
            <ColorExtractor src={file.preview} getColors={getColors} />
            {console.log('colors: ', colors)}
        </>
    }

    const handleSubmit = async (values) => {
        ColorGet(values.upl_Picture[0]);
        //...
    }

    return <form onSubmit={handleSubmit} autoComplete="off" className="form">
        {/* ... */}
    </form>
}

export default App;

为什么在

ColorGet

内部，

colors

的输出是一个空数组？

Answer 1

这是一个如何使用 react-color-extractor 从图像中提取主色的工作示例。

import { useState } from "react";
import exampleImage from './example.png';
import { ColorExtractor } from 'react-color-extractor';

function GetColorExample() {
    const [imgColors, setImgColors] = useState();

    return (
        <div>
            <ColorExtractor getColors={colors => setImgColors(colors)}>
                <img src={exampleImage}/>
            </ColorExtractor>
        </div>
    )
}

export default GetColorExample;