在 React 中使用 Color Thief 库不起作用答案

【问题标题】：Using Color Thief Library in React doesn't work在 React 中使用 Color Thief 库不起作用
【发布时间】：2023-03-10 11:43:01
【问题描述】：

我正在努力在反应应用中添加颜色小偷。我已按照 github 上的说明进行操作，但没有任何变化。我已经应用了建议报告here，然后将脚本插入到 setTimeout 函数中，但我总是得到同样的错误：

你能帮我在反应中运行这个库（或类似的库，如果你有替代品）？

到目前为止，这是我的代码：

import React from 'react';
import './App.css';
var ColorThief = require('color-thief');

function App() {
 setTimeout(function(){
    var colorThief = new ColorThief();
    var img = 'img.jpg';
    var palette = colorThief.getPalette(img, 8);
    var dominant =  colorThief.getColor(img);
    console.log(palette);
    console.log(dominant);
    document.getElementById("app").style.backgroundColor = "rgb(" + dominant + ")";
 }, 3000);

return (
    <div id="app"></div>
 );
}

export default App;

【问题讨论】：

getPalette/getColor 不需要字符串作为参数。
那我怎么传图片呢？
对于getColor，有一个getColorFromUrl，但是既然你还需要getPalette，我建议你看看github.com/lokesh/color-thief/blob/…的源代码创建一个图像元素，然后在它加载之后，将其传递给您已经使用过的函数。
不幸的是，这也不起作用。为了详细起见，我 console.log 了 colorThief var，结果它是一个空对象。这意味着 var ColorThief = require('color-thief');不返回任何东西。有什么建议吗？
您找到解决方案了吗？因为我正在为此苦苦挣扎

标签： javascript reactjs color-thief

【解决方案1】：

使用 npm 安装库：

$ npm i --save colorthief

将文件中的库导入为：

import ColorThief from "colorthief";

为您的图片创建一个react 参考，如下所示：

  constructor(props) {
    super(props);

    // Image element reference
    this.imgRef = React.createRef();
  }

图像组件应如下所示：

          <img
            crossOrigin={"anonymous"}
            ref={this.imgRef}
            src={
              "https://images.unsplash.com/photo-1516876437184-593fda40c7ce"
            }
            alt={"example"}
            className={"example__img"}
            onLoad={() => {
              const colorThief = new ColorThief();
              const img = this.imgRef.current;
              const result = colorThief.getColor(img, 25);
            }}
          />

（请注意，图片道具应按此顺序排列）

【讨论】：

像个魅力！！！

【解决方案2】：

import ColorThief from "colorthief";
import _ from 'lodash';

export const getPalette = (url) => {
    return new Promise((resolve, reject) => {
        if (!url) {
            reject();
        }
        const image = new Image();
        image.src = url;
        image.crossOrigin = 'Anonymous';

        image.onload = function () {
            const colorThief = new ColorThief();
            const palette = colorThief.getPalette(this, 10);
            const result = _.uniq(palette, item => JSON.stringify(item));
            resolve(result);
        }
    });
}

【讨论】：

请通过编辑您的帖子稍微描述一下您的解决方案。可能对 OP 有帮助

【解决方案3】：

下面的代码对我有用。 版本： "colorthief": "^2.3.2",

import ColorThief from "../../../node_modules/colorthief/dist/color-thief.mjs"; // your node modules path

export const getPalette = (url) => {
 return new Promise(resolve=>{
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = () => {
            let colorThief = new ColorThief();
            resolve(colorThief.getPalette(img));
        }
        img.src = url;
    })
}

【讨论】：