mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-27 06:44:25 +00:00
done
This commit is contained in:
@@ -1,108 +0,0 @@
|
||||
// TODO: Update using this pr https://github.com/lokesh/color-thief/pull/254
|
||||
const getPixels = require('get-pixels');
|
||||
const quantize = require('@lokesh.dhakar/quantize');
|
||||
|
||||
function createPixelArray(imgData, pixelCount, quality) {
|
||||
const pixels = imgData;
|
||||
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 (typeof a === 'undefined' || a >= 125) {
|
||||
if (!(r > 250 && g > 250 && b > 250)) {
|
||||
pixelArray.push([r, g, b]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return pixelArray;
|
||||
}
|
||||
|
||||
function validateOptions(options) {
|
||||
let { colorCount, quality } = options;
|
||||
|
||||
if (typeof colorCount === 'undefined' || !Number.isInteger(colorCount)) {
|
||||
colorCount = 10;
|
||||
} else if (colorCount === 1) {
|
||||
throw new Error(
|
||||
'colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()',
|
||||
);
|
||||
} else {
|
||||
colorCount = Math.max(colorCount, 2);
|
||||
colorCount = Math.min(colorCount, 20);
|
||||
}
|
||||
|
||||
if (
|
||||
typeof quality === 'undefined' ||
|
||||
!Number.isInteger(quality) ||
|
||||
quality < 1
|
||||
) {
|
||||
quality = 10;
|
||||
}
|
||||
|
||||
return {
|
||||
colorCount,
|
||||
quality,
|
||||
};
|
||||
}
|
||||
|
||||
function loadImg(img) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getPixels(img, function (err, data) {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getColor(img, quality) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getPalette(img, 5, quality)
|
||||
.then((palette) => {
|
||||
resolve(palette[0]);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getPalette(img, colorCount = 10, quality = 10) {
|
||||
const options = validateOptions({
|
||||
colorCount,
|
||||
quality,
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
loadImg(img)
|
||||
.then((imgData) => {
|
||||
const pixelCount = imgData.shape[0] * imgData.shape[1];
|
||||
const pixelArray = createPixelArray(
|
||||
imgData.data,
|
||||
pixelCount,
|
||||
options.quality,
|
||||
);
|
||||
|
||||
const cmap = quantize(pixelArray, options.colorCount);
|
||||
const palette = cmap ? cmap.palette() : null;
|
||||
|
||||
resolve(palette);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getColor,
|
||||
getPalette,
|
||||
};
|
||||
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Color Thief Node v3.0.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* Thanks
|
||||
* ------
|
||||
* Nick Rabinowitz - For creating quantize.js.
|
||||
* John Schulz - For clean up and optimization. @JFSIII
|
||||
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||
*
|
||||
* License
|
||||
* -------
|
||||
* Copyright Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
// Thanks to this PR for the work of migrating to ndarray-pixels pr https://github.com/lokesh/color-thief/pull/254
|
||||
import { getPixels } from 'ndarray-pixels';
|
||||
import quantize from '@lokesh.dhakar/quantize';
|
||||
import sharp from 'sharp';
|
||||
import ndarray from 'ndarray';
|
||||
|
||||
interface ColorThiefResult {
|
||||
'r': number;
|
||||
'g': number;
|
||||
'b': number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an array of arrays of pixels from an array of pixels
|
||||
* @param {number[]} pixels An array of pixels
|
||||
* @param {number} pixelCount The total number of pixels
|
||||
* @param {number} quality
|
||||
* @returns {number[][]} Returns an array of arrays of pixel values ([ r, g, b ])
|
||||
*/
|
||||
const createPixelArray = ( pixels: number[], pixelCount: number, quality: number ): number[][] => {
|
||||
const pixelArray: number[][] = [];
|
||||
|
||||
for ( let i = 0; i < pixelCount; i = i + quality ) {
|
||||
const offset = i * 4;
|
||||
const r = pixels[ offset + 0 ];
|
||||
const g = pixels[ offset + 1 ];
|
||||
const b = pixels[ offset + 2 ];
|
||||
const a = pixels[ offset + 3 ];
|
||||
|
||||
// If pixel is mostly opaque and not white
|
||||
if ( typeof a === 'undefined' || a >= 125 ) {
|
||||
if ( !( r > 250 && g > 250 && b > 250 ) ) {
|
||||
pixelArray.push( [ r, g, b ] );
|
||||
}
|
||||
}
|
||||
}
|
||||
return pixelArray;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate Color-Thief options
|
||||
* @param {{ colorCount: number; quality: number; }} options The options object
|
||||
* @returns {{ colorCount: number, quality: number }} The same object, but validated
|
||||
*/
|
||||
const validateOptions = ( options: { 'colorCount': number; 'quality': number; } ): { 'colorCount': number; 'quality': number; } => {
|
||||
let colorCount = options.colorCount;
|
||||
let quality = options.quality;
|
||||
|
||||
if ( typeof colorCount === 'undefined' || !Number.isInteger( colorCount ) ) {
|
||||
colorCount = 10;
|
||||
} else if ( colorCount === 1 ) {
|
||||
throw new Error(
|
||||
'colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()',
|
||||
);
|
||||
} else {
|
||||
colorCount = Math.max( colorCount, 2 );
|
||||
colorCount = Math.min( colorCount, 20 );
|
||||
}
|
||||
|
||||
if (
|
||||
typeof quality === 'undefined' ||
|
||||
!Number.isInteger( quality ) ||
|
||||
quality < 1
|
||||
) {
|
||||
quality = 10;
|
||||
}
|
||||
|
||||
return {
|
||||
colorCount,
|
||||
quality,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Load an image from the disk an pre-process
|
||||
* @param {string} img Path to the image on the disk
|
||||
* @returns {Promise<ndarray.NdArray<Uint8Array>>} Returns the pre-processed image
|
||||
*/
|
||||
const loadImg = ( img: string ): Promise<ndarray.NdArray<Uint8Array>> => {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
sharp( img )
|
||||
.toBuffer()
|
||||
.then( ( buffer ) => sharp( buffer ).metadata()
|
||||
.then( ( metadata ) => ( { buffer, 'format': metadata.format } ) ) )
|
||||
.then( ( { buffer, format } ) => getPixels( buffer, format ) )
|
||||
.then( resolve )
|
||||
.catch( reject );
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the dominant color of an image
|
||||
* @param {string} img Path to the image on the disk
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {Promise<ColorThiefResult>} Returns the dominant color
|
||||
*/
|
||||
const getColor = ( img: string, quality: number = 10 ): Promise<ColorThiefResult> => {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
getPalette( img, 5, quality )
|
||||
.then( ( palette ) => {
|
||||
resolve( palette[0] );
|
||||
} )
|
||||
.catch( ( err ) => {
|
||||
reject( err );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the color palette of an image
|
||||
* @param {string} img Path to the image on the disk
|
||||
* @param {number?} colorCount (Optional) the target amount of colors to try and extract
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {Promise<ColorThiefResult[]>} Returns an array of colors
|
||||
*/
|
||||
const getPalette = ( img: string, colorCount: number = 10, quality: number = 10 ): Promise<ColorThiefResult[]> => {
|
||||
const options = validateOptions( {
|
||||
colorCount,
|
||||
quality,
|
||||
} );
|
||||
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
loadImg( img )
|
||||
.then( ( imgData ) => {
|
||||
const pixelCount = imgData.shape[0] * imgData.shape[1];
|
||||
const pixelArray = createPixelArray(
|
||||
Array.from( imgData.data ),
|
||||
pixelCount,
|
||||
options.quality,
|
||||
);
|
||||
|
||||
const cmap = quantize( pixelArray, options.colorCount );
|
||||
const palette = cmap ? cmap.palette() : null;
|
||||
|
||||
resolve( palette );
|
||||
} )
|
||||
.catch( ( err ) => {
|
||||
reject( err );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getColor,
|
||||
getPalette,
|
||||
};
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
import quantize from '../node_modules/@lokesh.dhakar/quantize/dist/index.mjs';
|
||||
import core from './core.js';
|
||||
|
||||
/*
|
||||
* Color Thief v2.4.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* Thanks
|
||||
* ------
|
||||
* Nick Rabinowitz - For creating quantize.js.
|
||||
* John Schulz - For clean up and optimization. @JFSIII
|
||||
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||
*
|
||||
* License
|
||||
* -------
|
||||
* Copyright Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
|
||||
*
|
||||
* @license
|
||||
*/
|
||||
|
||||
/*
|
||||
CanvasImage Class
|
||||
Class that wraps the html image element and canvas.
|
||||
It also simplifies some of the canvas context manipulation
|
||||
with a set of helper functions.
|
||||
*/
|
||||
|
||||
const CanvasImage = function (image) {
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.width = this.canvas.width = image.naturalWidth;
|
||||
this.height = this.canvas.height = image.naturalHeight;
|
||||
this.context.drawImage(image, 0, 0, this.width, this.height);
|
||||
};
|
||||
|
||||
CanvasImage.prototype.getImageData = function () {
|
||||
return this.context.getImageData(0, 0, this.width, this.height);
|
||||
};
|
||||
|
||||
var ColorThief = function () {};
|
||||
|
||||
/*
|
||||
* getColor(sourceImage[, quality])
|
||||
* returns {r: num, g: num, b: num}
|
||||
*
|
||||
* Use the median cut algorithm provided by quantize.js to cluster similar
|
||||
* colors and return the base color from the largest cluster.
|
||||
*
|
||||
* Quality is an optional argument. It needs to be an integer. 1 is the highest quality settings.
|
||||
* 10 is the default. There is a trade-off between quality and speed. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
*
|
||||
* */
|
||||
ColorThief.prototype.getColor = function (sourceImage, quality = 10) {
|
||||
const palette = this.getPalette(sourceImage, 5, quality);
|
||||
const dominantColor = palette[0];
|
||||
return dominantColor;
|
||||
};
|
||||
|
||||
/*
|
||||
* getPalette(sourceImage[, colorCount, quality])
|
||||
* returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
||||
*
|
||||
* Use the median cut algorithm provided by quantize.js to cluster similar colors.
|
||||
*
|
||||
* colorCount determines the size of the palette; the number of colors returned. If not set, it
|
||||
* defaults to 10.
|
||||
*
|
||||
* quality is an optional argument. It needs to be an integer. 1 is the highest quality settings.
|
||||
* 10 is the default. There is a trade-off between quality and speed. The bigger the number, the
|
||||
* faster the palette generation but the greater the likelihood that colors will be missed.
|
||||
*
|
||||
*
|
||||
*/
|
||||
ColorThief.prototype.getPalette = function (sourceImage, colorCount, quality) {
|
||||
const options = core.validateOptions({
|
||||
colorCount,
|
||||
quality,
|
||||
});
|
||||
|
||||
// Create custom CanvasImage object
|
||||
const image = new CanvasImage(sourceImage);
|
||||
const imageData = image.getImageData();
|
||||
const pixelCount = image.width * image.height;
|
||||
|
||||
const pixelArray = core.createPixelArray(
|
||||
imageData.data,
|
||||
pixelCount,
|
||||
options.quality,
|
||||
);
|
||||
|
||||
// Send array to quantize function which clusters values
|
||||
// using median cut algorithm
|
||||
const cmap = quantize(pixelArray, options.colorCount);
|
||||
const palette = cmap ? cmap.palette() : null;
|
||||
|
||||
return palette;
|
||||
};
|
||||
|
||||
ColorThief.prototype.getColorFromUrl = function (imageUrl, callback, quality) {
|
||||
const sourceImage = document.createElement('img');
|
||||
|
||||
sourceImage.addEventListener('load', () => {
|
||||
const palette = this.getPalette(sourceImage, 5, quality);
|
||||
const dominantColor = palette[0];
|
||||
callback(dominantColor, imageUrl);
|
||||
});
|
||||
sourceImage.src = imageUrl;
|
||||
};
|
||||
|
||||
ColorThief.prototype.getImageData = function (imageUrl, callback) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', imageUrl, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.onload = function () {
|
||||
if (this.status == 200) {
|
||||
let uInt8Array = new Uint8Array(this.response);
|
||||
i = uInt8Array.length;
|
||||
let binaryString = new Array(i);
|
||||
for (let i = 0; i < uInt8Array.length; i++) {
|
||||
binaryString[i] = String.fromCharCode(uInt8Array[i]);
|
||||
}
|
||||
let data = binaryString.join('');
|
||||
let base64 = window.btoa(data);
|
||||
callback('data:image/png;base64,' + base64);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
ColorThief.prototype.getColorAsync = function (imageUrl, callback, quality) {
|
||||
const thief = this;
|
||||
this.getImageData(imageUrl, function (imageData) {
|
||||
const sourceImage = document.createElement('img');
|
||||
sourceImage.addEventListener('load', function () {
|
||||
const palette = thief.getPalette(sourceImage, 5, quality);
|
||||
const dominantColor = palette[0];
|
||||
callback(dominantColor, this);
|
||||
});
|
||||
sourceImage.src = imageData;
|
||||
});
|
||||
};
|
||||
|
||||
export default ColorThief;
|
||||
@@ -1,8 +1,8 @@
|
||||
import quantize from '../node_modules/@lokesh.dhakar/quantize/dist/index.mjs';
|
||||
import core from './core.js';
|
||||
|
||||
/*
|
||||
* Color Thief v2.4.0
|
||||
/**
|
||||
* Color Thief v3.0.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* Thanks
|
||||
@@ -17,50 +17,61 @@ import core from './core.js';
|
||||
* Released under the MIT license
|
||||
* https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
|
||||
*
|
||||
* @license
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/*
|
||||
CanvasImage Class
|
||||
Class that wraps the html image element and canvas.
|
||||
/**
|
||||
@class CanvasImage that wraps the html image element and canvas.
|
||||
It also simplifies some of the canvas context manipulation
|
||||
with a set of helper functions.
|
||||
*/
|
||||
class CanvasImage {
|
||||
canvas: HTMLCanvasElement;
|
||||
|
||||
const CanvasImage = function (image: HTMLImageElement) {
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.width = this.canvas.width = image.naturalWidth;
|
||||
this.height = this.canvas.height = image.naturalHeight;
|
||||
this.context.drawImage(image, 0, 0, this.width, this.height);
|
||||
};
|
||||
context: CanvasRenderingContext2D;
|
||||
|
||||
CanvasImage.prototype.getImageData = function () {
|
||||
return this.context.getImageData(0, 0, this.width, this.height);
|
||||
};
|
||||
width: number;
|
||||
|
||||
interface ColorThiefResult {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
height: number;
|
||||
|
||||
constructor ( image: HTMLImageElement ) {
|
||||
this.canvas = document.createElement( 'canvas' );
|
||||
this.context = this.canvas.getContext( '2d' );
|
||||
this.width = this.canvas.width = image.naturalWidth;
|
||||
this.height = this.canvas.height = image.naturalHeight;
|
||||
this.context.drawImage( image, 0, 0, this.width, this.height );
|
||||
}
|
||||
|
||||
getImageData = function () {
|
||||
return this.context.getImageData( 0, 0, this.width, this.height );
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
interface ColorThiefResult {
|
||||
'r': number;
|
||||
'g': number;
|
||||
'b': number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @class The main ColorThief class
|
||||
*/
|
||||
class ColorThief {
|
||||
/**
|
||||
* Use the median cut algorithm provided by quantize.js to cluster similar
|
||||
* colors and return the base color from the largest cluster.
|
||||
* @param {HTMLImageElement} sourceImage:HTMLImageElement
|
||||
* @param {number} quality Quality is an optional argument. It needs to be an integer. 1 is the highest quality settings.
|
||||
* 10 is the default. There is a trade-off between quality and speed. The bigger the number, the
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {ColorThiefResult} returns {r: num, g: num, b: num}
|
||||
*/
|
||||
getColor(
|
||||
getColor (
|
||||
sourceImage: HTMLImageElement,
|
||||
quality: number = 10,
|
||||
): ColorThiefResult {
|
||||
const palette = this.getPalette(sourceImage, 5, quality);
|
||||
const palette = this.getPalette( sourceImage, 5, quality );
|
||||
return palette[0];
|
||||
}
|
||||
|
||||
@@ -69,23 +80,23 @@ class ColorThief {
|
||||
* @param {HTMLImageElement} sourceImage The image you want to have processed, as an HTMLImageElement
|
||||
* @param {number?} colorCount colorCount determines the size of the palette; the number of colors returned. If not set, it
|
||||
* defaults to 10.
|
||||
* @param {number?} quality quality is an optional argument. It needs to be an integer. 1 is the highest quality settings.
|
||||
* 10 is the default. There is a trade-off between quality and speed. The bigger the number, the
|
||||
* faster the palette generation but the greater the likelihood that colors will be missed.
|
||||
* @returns {ColorThiefResult[]} returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {ColorThiefResult[] | null} returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
||||
*/
|
||||
getPalette(
|
||||
getPalette (
|
||||
sourceImage: HTMLImageElement,
|
||||
colorCount?: number,
|
||||
quality: number = 10,
|
||||
): ColorThiefResult[] {
|
||||
const options = core.validateOptions({
|
||||
): ColorThiefResult[] | null {
|
||||
const options = core.validateOptions( {
|
||||
colorCount,
|
||||
quality,
|
||||
});
|
||||
} );
|
||||
|
||||
// Create custom CanvasImage object
|
||||
const image = new CanvasImage(sourceImage);
|
||||
const image = new CanvasImage( sourceImage );
|
||||
const imageData = image.getImageData();
|
||||
const pixelCount = image.width * image.height;
|
||||
|
||||
@@ -97,83 +108,127 @@ class ColorThief {
|
||||
|
||||
// Send array to quantize function which clusters values
|
||||
// using median cut algorithm
|
||||
const cmap = quantize(pixelArray, options.colorCount);
|
||||
const palette = cmap ? cmap.palette() : null;
|
||||
const cmap = quantize( pixelArray, options.colorCount );
|
||||
const palette: null | ColorThiefResult[] = cmap ? cmap.palette() : null;
|
||||
|
||||
return palette;
|
||||
}
|
||||
|
||||
/**
|
||||
* Description
|
||||
* @param {any} imageUrl
|
||||
* @param {any} callback
|
||||
* @param {any} quality
|
||||
* @returns {any}
|
||||
* [ DEPRECATED ] Get the dominant color of an image, which is fetched from a URL.
|
||||
* @param {string} imageUrl
|
||||
* @param {( color: ColorThiefResult, url: string ) => void} callback The callback function called when the image has finished processing
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {void}
|
||||
* @deprecated since Version 3.0, use getColorFromURLPromise instead
|
||||
*/
|
||||
getColorFromUrl(imageUrl, callback, quality) {
|
||||
const sourceImage = document.createElement('img');
|
||||
getColorFromUrl ( imageUrl: string, callback: ( color: ColorThiefResult, url: string ) => void, quality: number = 10 ): void {
|
||||
const sourceImage = document.createElement( 'img' );
|
||||
|
||||
sourceImage.addEventListener('load', () => {
|
||||
const palette = this.getPalette(sourceImage, 5, quality);
|
||||
sourceImage.addEventListener( 'load', () => {
|
||||
const palette = this.getPalette( sourceImage, 5, quality );
|
||||
const dominantColor = palette[0];
|
||||
callback(dominantColor, imageUrl);
|
||||
});
|
||||
callback( dominantColor, imageUrl );
|
||||
} );
|
||||
sourceImage.src = imageUrl;
|
||||
}
|
||||
|
||||
/**
|
||||
* Description
|
||||
* @param {string} imageUrl
|
||||
* @param {string} callback
|
||||
* [ DEPRECATED ] Get Image Data as a Base64 string from a URL
|
||||
* @param {string} imageUrl The URL to the image. Has to be a full URL, if not relative
|
||||
* @param {( data: string ) => void} callback The callback function called, once download is complete. Will only be called if successful at downloading
|
||||
* @returns {void}
|
||||
* @deprecated since Version 3.0, use getImageDataFromURL instead
|
||||
*/
|
||||
getImageData(imageUrl: string, callback) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', imageUrl, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
|
||||
fetch(imageUrl).then((res) => {
|
||||
if (res.status === 200) {
|
||||
res.arrayBuffer().then((response) => {
|
||||
const uInt8Array = new Uint8Array(response);
|
||||
let binaryString = new Array(uInt8Array.length);
|
||||
for (let i = 0; i < uInt8Array.length; i++) {
|
||||
binaryString[i] = String.fromCharCode(uInt8Array[i]);
|
||||
getImageData ( imageUrl: string, callback: ( data: string ) => void ): void {
|
||||
fetch( imageUrl ).then( ( res ) => {
|
||||
if ( res.status === 200 ) {
|
||||
res.arrayBuffer().then( ( response ) => {
|
||||
const uInt8Array = new Uint8Array( response );
|
||||
const binaryString = new Array( uInt8Array.length );
|
||||
for ( let i = 0; i < uInt8Array.length; i++ ) {
|
||||
binaryString[i] = String.fromCharCode( uInt8Array[i] );
|
||||
}
|
||||
let data = binaryString.join('');
|
||||
let base64 = window.btoa(data);
|
||||
});
|
||||
const data = binaryString.join( '' );
|
||||
callback( 'data:image/png;base64,' + window.btoa( data ) );
|
||||
} );
|
||||
}
|
||||
});
|
||||
|
||||
xhr.onload = function () {
|
||||
if (this.status == 200) {
|
||||
let uInt8Array = new Uint8Array(this.response);
|
||||
|
||||
callback('data:image/png;base64,' + base64);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Description
|
||||
* @param {any} imageUrl
|
||||
* @param {any} callback
|
||||
* @param {any} quality
|
||||
* @returns {any}
|
||||
* Get Image Data as a Base64 string from a URL
|
||||
* @param {string} imageUrl The URL to the image. Has to be a full URL, if not relative
|
||||
* @returns {Promise<string>} returns a Promise resolving to a string with the base64 string
|
||||
*/
|
||||
getColorAsync = function (imageUrl, callback, quality) {
|
||||
getImageDataFromURL ( imageUrl: string ): Promise<string> {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
fetch( imageUrl ).then( ( res ) => {
|
||||
if ( res.status === 200 ) {
|
||||
res.arrayBuffer().then( ( response ) => {
|
||||
const uInt8Array = new Uint8Array( response );
|
||||
const binaryString = new Array( uInt8Array.length );
|
||||
for ( let i = 0; i < uInt8Array.length; i++ ) {
|
||||
binaryString[i] = String.fromCharCode( uInt8Array[i] );
|
||||
}
|
||||
const data = binaryString.join( '' );
|
||||
resolve( 'data:image/png;base64,' + window.btoa( data ) );
|
||||
} );
|
||||
} else {
|
||||
reject( 'ERR_LOADING' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* [ DEPRECATED ] Same as getColor, but async
|
||||
* @param {string} imageUrl
|
||||
* @param {( data: ColorThiefResult ) => void} callback
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {void}
|
||||
* @deprecated since Version 3.0, in favour of getColorPromise. Only retained for compatibility
|
||||
*/
|
||||
getColorAsync = ( imageUrl: string, callback: ( data: ColorThiefResult, img: HTMLImageElement ) => void, quality: number | null ): void => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
const thief = this;
|
||||
this.getImageData(imageUrl, function (imageData) {
|
||||
const sourceImage = document.createElement('img');
|
||||
sourceImage.addEventListener('load', function () {
|
||||
const palette = thief.getPalette(sourceImage, 5, quality);
|
||||
const dominantColor = palette[0];
|
||||
callback(dominantColor, this);
|
||||
});
|
||||
this.getImageDataFromURL( imageUrl ).then( ( imageData ) => {
|
||||
const sourceImage = document.createElement( 'img' );
|
||||
sourceImage.addEventListener( 'load', () => {
|
||||
const palette = thief.getPalette( sourceImage, 5, quality );
|
||||
callback( palette[ 0 ], sourceImage );
|
||||
} );
|
||||
sourceImage.src = imageData;
|
||||
});
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Same as getColor, but promise-based
|
||||
* @param {string} imageUrl
|
||||
* @param {number?} quality (Optional) 1 = highest quality, 10 = default. The bigger the number, the
|
||||
* faster a color will be returned but the greater the likelihood that it will not be the visually
|
||||
* most dominant color.
|
||||
* @returns {Promise<{ 'color': ColorThiefResult, 'img': HTMLImageElement }>} Returns a promise resolving to an object containing the color and the image element
|
||||
*/
|
||||
getColorPromise = ( imageUrl: string, quality: number | null ): Promise<{ 'color': ColorThiefResult, 'img': HTMLImageElement }> => {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
const thief = this;
|
||||
this.getImageDataFromURL( imageUrl ).then( ( imageData ) => {
|
||||
const sourceImage = document.createElement( 'img' );
|
||||
sourceImage.addEventListener( 'load', () => {
|
||||
const palette = thief.getPalette( sourceImage, 5, quality );
|
||||
resolve( { 'color': palette[ 0 ], 'img': sourceImage } );
|
||||
} );
|
||||
sourceImage.src = imageData;
|
||||
} ).catch( ( e ) => {
|
||||
reject( e );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
53
src/core.js
53
src/core.js
@@ -1,53 +0,0 @@
|
||||
function createPixelArray(imgData, pixelCount, quality) {
|
||||
const pixels = imgData;
|
||||
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 (typeof a === 'undefined' || a >= 125) {
|
||||
if (!(r > 250 && g > 250 && b > 250)) {
|
||||
pixelArray.push([r, g, b]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return pixelArray;
|
||||
}
|
||||
|
||||
function validateOptions(options) {
|
||||
let { colorCount, quality } = options;
|
||||
|
||||
if (typeof colorCount === 'undefined' || !Number.isInteger(colorCount)) {
|
||||
colorCount = 10;
|
||||
} else if (colorCount === 1) {
|
||||
throw new Error(
|
||||
'colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()',
|
||||
);
|
||||
} else {
|
||||
colorCount = Math.max(colorCount, 2);
|
||||
colorCount = Math.min(colorCount, 20);
|
||||
}
|
||||
|
||||
if (
|
||||
typeof quality === 'undefined' ||
|
||||
!Number.isInteger(quality) ||
|
||||
quality < 1
|
||||
) {
|
||||
quality = 10;
|
||||
}
|
||||
|
||||
return {
|
||||
colorCount,
|
||||
quality,
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
createPixelArray,
|
||||
validateOptions,
|
||||
};
|
||||
84
src/core.ts
84
src/core.ts
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Color Thief Core v3.0.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* Thanks
|
||||
* ------
|
||||
* Nick Rabinowitz - For creating quantize.js.
|
||||
* John Schulz - For clean up and optimization. @JFSIII
|
||||
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||
*
|
||||
* License
|
||||
* -------
|
||||
* Copyright Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/**
|
||||
* Create an array of arrays of pixels from an array of pixels
|
||||
* @param {number[]} pixels An array of pixels
|
||||
* @param {number} pixelCount The total number of pixels
|
||||
* @param {number} quality
|
||||
* @returns {number[][]} Returns an array of arrays of pixel values ([ r, g, b ])
|
||||
*/
|
||||
const createPixelArray = ( pixels: number[], pixelCount: number, quality: number ): number[][] => {
|
||||
const pixelArray: number[][] = [];
|
||||
|
||||
for ( let i = 0; i < pixelCount; i = i + quality ) {
|
||||
const offset = i * 4;
|
||||
const r = pixels[ offset + 0 ];
|
||||
const g = pixels[ offset + 1 ];
|
||||
const b = pixels[ offset + 2 ];
|
||||
const a = pixels[ offset + 3 ];
|
||||
|
||||
// If pixel is mostly opaque and not white
|
||||
if ( typeof a === 'undefined' || a >= 125 ) {
|
||||
if ( !( r > 250 && g > 250 && b > 250 ) ) {
|
||||
pixelArray.push( [ r, g, b ] );
|
||||
}
|
||||
}
|
||||
}
|
||||
return pixelArray;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate Color-Thief options
|
||||
* @param {{ colorCount: number; quality: number; }} options The options object
|
||||
* @returns {{ colorCount: number, quality: number }} The same object, but validated
|
||||
*/
|
||||
const validateOptions = ( options: { 'colorCount': number; 'quality': number; } ): { 'colorCount': number; 'quality': number; } => {
|
||||
let colorCount = options.colorCount;
|
||||
let quality = options.quality;
|
||||
|
||||
if ( typeof colorCount === 'undefined' || !Number.isInteger( colorCount ) ) {
|
||||
colorCount = 10;
|
||||
} else if ( colorCount === 1 ) {
|
||||
throw new Error(
|
||||
'colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()',
|
||||
);
|
||||
} else {
|
||||
colorCount = Math.max( colorCount, 2 );
|
||||
colorCount = Math.min( colorCount, 20 );
|
||||
}
|
||||
|
||||
if (
|
||||
typeof quality === 'undefined' ||
|
||||
!Number.isInteger( quality ) ||
|
||||
quality < 1
|
||||
) {
|
||||
quality = 10;
|
||||
}
|
||||
|
||||
return {
|
||||
colorCount,
|
||||
quality,
|
||||
};
|
||||
};
|
||||
|
||||
export default {
|
||||
createPixelArray,
|
||||
validateOptions,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user