Использование библиотеки Color Thief в React не работает
Я изо всех сил пытаюсь добавить Color Thief в приложение для реагирования. Я следовал инструкциям на github, но ничего не изменилось. Я применил предложения reporte здесь, а затем вставил скрипты в функцию 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.info(palette);
console.info(dominant);
document.getElementById("app").style.backgroundColor = "rgb(" + dominant + ")";
}, 3000);
return (
<div id = "app"></div>
);
}
export default App;
как я могу передать изображение тогда?
Для getColor есть getColorFromUrl, но поскольку вам также нужен getPalette, я предлагаю взглянуть на исходный код в github.com/lokesh/color-thief/blob/…. Создайте элемент изображения и после его загрузки передайте его функциям, которые вы уже использовали.
К сожалению, это тоже не работает. Ради подробностей я console.info переменная colorThief, и оказалось, что это пустой объект. Это означает, что var ColorThief = require('color-thief'); ничего не возвращает. Какие-либо предложения?
Вы нашли решение? потому что я борюсь с этим
@Yorbjörn Решения внизу довольно хороши. Другим может быть переписывание этой библиотеки в es6, к сожалению
Спасибо за ответ, к счастью, я нашел другой пакет, который помогает мне. npmjs.com/package/rgbaster
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Установите библиотеку с помощью npm:
$ npm i --save colorthief
Импортируйте библиотеку в свой файл как:
import ColorThief from "colorthief";
Создайте ссылка на реакцию для своего изображения следующим образом:
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);
}}
/>
( Пожалуйста, обрати внимание, реквизит изображения должен быть именно в этом порядке)
как магия!!!
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);
}
});
}
Пожалуйста, опишите немного свое решение, отредактировав свой пост. Это может быть полезно для ОП
Этот код ниже работает для меня. версия: "похититель цветов": "^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;
})
}
getPalette/getColorне ожидает строку в качестве параметра.