start migrating to TS, update eslint config

src/color-thief-node.js

@@ -1,3 +1,4 @@
+// TODO: Update using this pr https://github.com/lokesh/color-thief/pull/254
 const getPixels = require('get-pixels');
 const quantize = require('@lokesh.dhakar/quantize');
 
@@ -27,73 +28,81 @@ function validateOptions(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 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) {
+    if (
+        typeof quality === 'undefined' ||
+        !Number.isInteger(quality) ||
+        quality < 1
+    ) {
         quality = 10;
     }
 
     return {
         colorCount,
-        quality
-    }
+        quality,
+    };
 }
 
 function loadImg(img) {
     return new Promise((resolve, reject) => {
-        getPixels(img, function(err, data) {
-            if(err) {
-                reject(err)
+        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 => {
+            .then((palette) => {
                 resolve(palette[0]);
             })
-            .catch(err => {
+            .catch((err) => {
                 reject(err);
-            })
+            });
     });
-
 }
 
 function getPalette(img, colorCount = 10, quality = 10) {
     const options = validateOptions({
         colorCount,
-        quality
+        quality,
     });
 
     return new Promise((resolve, reject) => {
         loadImg(img)
-            .then(imgData => {
+            .then((imgData) => {
                 const pixelCount = imgData.shape[0] * imgData.shape[1];
-                const pixelArray = createPixelArray(imgData.data, pixelCount, options.quality);
+                const pixelArray = createPixelArray(
+                    imgData.data,
+                    pixelCount,
+                    options.quality,
+                );
 
                 const cmap = quantize(pixelArray, options.colorCount);
-                const palette = cmap? cmap.palette() : null;
+                const palette = cmap ? cmap.palette() : null;
 
                 resolve(palette);
             })
-            .catch(err => {
+            .catch((err) => {
                 reject(err);
-            })
+            });
     });
 }
 
 module.exports = {
     getColor,
-    getPalette
+    getPalette,
 };
-

src/color-thief.js

@@ -20,7 +20,6 @@ import core from './core.js';
  * @license
  */
 
-
 /*
   CanvasImage Class
   Class that wraps the html image element and canvas.
@@ -29,9 +28,9 @@ import core from './core.js';
 */
 
 const CanvasImage = function (image) {
-    this.canvas  = document.createElement('canvas');
+    this.canvas = document.createElement('canvas');
     this.context = this.canvas.getContext('2d');
-    this.width  = this.canvas.width  = image.naturalWidth;
+    this.width = this.canvas.width = image.naturalWidth;
     this.height = this.canvas.height = image.naturalHeight;
     this.context.drawImage(image, 0, 0, this.width, this.height);
 };
@@ -55,13 +54,12 @@ var ColorThief = function () {};
  * most dominant color.
  *
  * */
-ColorThief.prototype.getColor = function(sourceImage, quality = 10) {
-    const palette       = this.getPalette(sourceImage, 5, quality);
+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}, ...]
@@ -77,64 +75,67 @@ ColorThief.prototype.getColor = function(sourceImage, quality = 10) {
  *
  *
  */
-ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) {
+ColorThief.prototype.getPalette = function (sourceImage, colorCount, quality) {
     const options = core.validateOptions({
         colorCount,
-        quality
+        quality,
     });
 
     // Create custom CanvasImage object
-    const image      = new CanvasImage(sourceImage);
-    const imageData  = image.getImageData();
+    const image = new CanvasImage(sourceImage);
+    const imageData = image.getImageData();
     const pixelCount = image.width * image.height;
 
-    const pixelArray = core.createPixelArray(imageData.data, pixelCount, options.quality);
+    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;
+    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");
+ColorThief.prototype.getColorFromUrl = function (imageUrl, callback, quality) {
+    const sourceImage = document.createElement('img');
 
-    sourceImage.addEventListener('load' , () => {
+    sourceImage.addEventListener('load', () => {
         const palette = this.getPalette(sourceImage, 5, quality);
         const dominantColor = palette[0];
         callback(dominantColor, imageUrl);
     });
-    sourceImage.src = imageUrl
+    sourceImage.src = imageUrl;
 };
 
-
-ColorThief.prototype.getImageData = function(imageUrl, callback) {
+ColorThief.prototype.getImageData = function (imageUrl, callback) {
     let xhr = new XMLHttpRequest();
     xhr.open('GET', imageUrl, true);
     xhr.responseType = 'arraybuffer';
-    xhr.onload = function() {
+    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++){
+            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);
+            callback('data:image/png;base64,' + base64);
         }
-    }
+    };
     xhr.send();
 };
 
-ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) {
+ColorThief.prototype.getColorAsync = function (imageUrl, callback, quality) {
     const thief = this;
-    this.getImageData(imageUrl, function(imageData){
-        const sourceImage = document.createElement("img");
-        sourceImage.addEventListener('load' , function(){
+    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);
@@ -143,5 +144,4 @@ ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) {
     });
 };
 
-
 export default ColorThief;

src/color-thief.ts

@@ -0,0 +1,180 @@
+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: 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);
+};
+
+CanvasImage.prototype.getImageData = function () {
+    return this.context.getImageData(0, 0, this.width, this.height);
+};
+
+interface ColorThiefResult {
+    r: number;
+    g: number;
+    b: number;
+}
+
+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
+     * 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(
+        sourceImage: HTMLImageElement,
+        quality: number = 10,
+    ): ColorThiefResult {
+        const palette = this.getPalette(sourceImage, 5, quality);
+        return palette[0];
+    }
+
+    /**
+     * Use the median cut algorithm provided by quantize.js to cluster similar colors.
+     * @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}, ...]
+     */
+    getPalette(
+        sourceImage: HTMLImageElement,
+        colorCount?: number,
+        quality: number = 10,
+    ): ColorThiefResult[] {
+        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;
+    }
+
+    /**
+     * Description
+     * @param {any} imageUrl
+     * @param {any} callback
+     * @param {any} quality
+     * @returns {any}
+     */
+    getColorFromUrl(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;
+    }
+
+    /**
+     * Description
+     * @param {string} imageUrl
+     * @param {string} callback
+     * @returns {void}
+     */
+    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]);
+                    }
+                    let data = binaryString.join('');
+                    let 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}
+     */
+    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;

src/core.js

@@ -24,24 +24,30 @@ function validateOptions(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 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) {
+    if (
+        typeof quality === 'undefined' ||
+        !Number.isInteger(quality) ||
+        quality < 1
+    ) {
         quality = 10;
     }
 
     return {
         colorCount,
-        quality
-    }
+        quality,
+    };
 }
 
 export default {
     createPixelArray,
-    validateOptions
+    validateOptions,
 };