palette, extracting image colors

1 files changed, 57 insertions, 0 deletions

diff --git a/src/client/views/ExtractColors.ts b/src/client/views/ExtractColors.ts
new file mode 100644
index 000000000..f78d9a355
--- /dev/null
+++ b/src/client/views/ExtractColors.ts
@@ -0,0 +1,57 @@
+import { extractColors } from 'extract-colors';
+
+// Manages image color extraction
+export class ExtractColors {
+    // loads all images into img elements
+    static loadImages = async (imageFiles: File[]): Promise<HTMLImageElement[]> => {
+        try {
+            const imageElements = await Promise.all(imageFiles.map(file => this.loadImage(file)));
+            return imageElements;
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+    };
+
+    // loads a single img into an img element
+    static loadImage = (file: File): Promise<HTMLImageElement> => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+
+            img.onload = () => resolve(img);
+            img.onerror = error => reject(error);
+
+            const url = URL.createObjectURL(file);
+            img.src = url;
+        });
+    };
+
+    // loads all images into img elements
+    static loadImagesUrl = async (imageUrls: string[]): Promise<HTMLImageElement[]> => {
+        try {
+            const imageElements = await Promise.all(imageUrls.map(url => this.loadImageUrl(url)));
+            return imageElements;
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+    };
+
+    // loads a single img into an img element
+    static loadImageUrl = (url: string): Promise<HTMLImageElement> => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+
+            img.onload = () => resolve(img);
+            img.onerror = error => reject(error);
+
+            img.src = url;
+        });
+    };
+
+    // extracts a list of collors from an img element
+    static getImgColors = async (img: HTMLImageElement) => {
+        const colors = await extractColors(img, { distance: 0.35 });
+        return colors;
+    };
+}