在 React 中使用 Color Thief 库不起作用
Using Color Thief Library in React doesn't work
我正在努力在 React 应用程序中添加 Color Thief。我已按照 github 上的说明进行操作,但没有任何变化。
我已经应用了 reporte 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;
使用 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);
}}
/>
(请注意, 图片道具应按此顺序排列)
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;
})
}
我正在努力在 React 应用程序中添加 Color Thief。我已按照 github 上的说明进行操作,但没有任何变化。 我已经应用了 reporte 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;
使用 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);
}}
/>
(请注意, 图片道具应按此顺序排列)
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;
})
}