@soarlin/angular-color-thief
Version:
Rewirte ColorThief as a Angular service
102 lines (96 loc) • 4.22 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, NgModule } from '@angular/core';
import quantize from 'quantize';
class ColorThiefService {
canvas;
context;
pixelCount;
quality;
constructor() {
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.pixelCount = 10000;
this.quality = 10;
}
getColor(sourceImage, quality = 10) {
const palette = this.getPalette(sourceImage, 5, quality);
return palette[0];
}
getPalette(sourceImage, colorCount = 10, quality = 10) {
if (typeof colorCount === 'undefined' || colorCount < 2 || colorCount > 256) {
colorCount = 10;
}
if (typeof quality === 'undefined' || quality < 1) {
quality = 10;
}
// Create custom CanvasRenderingContext2D from the image
const imageWidth = sourceImage.naturalWidth || sourceImage.width;
const imageHeight = sourceImage.naturalHeight || sourceImage.height;
this.canvas.width = imageWidth;
this.canvas.height = imageHeight;
this.context.clearRect(0, 0, imageWidth, imageHeight);
this.context.drawImage(sourceImage, 0, 0, imageWidth, imageHeight);
const imageData = this.context.getImageData(0, 0, imageWidth, imageHeight);
const pixels = imageData.data;
const pixelCount = imageWidth * imageHeight;
const pixelArray = [];
for (let i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
offset = i * 4;
r = pixels[offset + 0];
g = pixels[offset + 1];
b = pixels[offset + 2];
a = pixels[offset + 3];
// If pixel is mostly opaque and not white
if (a >= 125) {
if (!(r > 250 && g > 250 && b > 250)) {
pixelArray.push([r, g, b]);
}
}
}
// Use quantize to build the color palette
const cmap = quantize(pixelArray, colorCount);
const palette = cmap ? cmap.palette() : [];
return palette;
}
async getPaletteFromUrl(imageUrl, count = 5, quality = 10) {
try {
const img = new Image();
img.src = imageUrl;
await new Promise((resolve, reject) => {
img.onload = () => resolve();
img.onerror = reject;
});
return this.getPalette(img, count, quality);
}
catch (error) {
throw new Error(`Failed to load image: ${error instanceof Error ? error.message : String(error)}`);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class ColorThiefModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefModule });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefModule, providers: [ColorThiefService] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ColorThiefModule, decorators: [{
type: NgModule,
args: [{
providers: [ColorThiefService]
}]
}] });
/*
* Public API Surface of ng-color-thief
*/
/**
* Generated bundle index. Do not edit.
*/
export { ColorThiefModule, ColorThiefService };
//# sourceMappingURL=soarlin-angular-color-thief.mjs.map