I am attempting to integrate the Library ColorThief () into an Angular 12 project, but unfortunately, I have been unable to make it work. I started by running $ npm i --save colorthief and then in my desired component .ts file:
const ColorThief = require('colorthief');The compilation is successful, however, some of the methods are not being recognized when triggered in the browser.
I also attempted adding the script tag to my index.html file, without any luck.
This is a snippet from my Component TS file:
import { Color } from '../shared/model/color';
const ColorThief = require('colorthief');
//import ColorThief from 'angular-colorthief';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterViewInit {
...
autoGeneratePalette(numColors:number) {
this.userPalette = [];
this.paletteCounter = 0;
//var ColorThief:any = new ColorThief();
ColorThief.getPalette(this.imgToUse, numColors)
.then((palette: any) => {
for(var i = 0; i < palette.length; i++) {
var color = new Color(0,0,0,0);
color.red = palette[i][0];
color.green = palette[i][1];
color.blue = palette[i][2];
color.index = i;
this.userPalette.push(color);
}
})
.catch((err: any) => {console.log(err)});
}
}
Does anyone have any insights on what could be going wrong? Or has anyone successfully implemented ColorThief in Angular before?