refactor: refactoing of color conversion functions hexToRgb and rgbToHex

demo/index.html

@@ -29,7 +29,7 @@
     <script type="module" src="scripts/change-shadow-demo.js"></script>
     <script type="module" src="scripts/change-tint-demo.js"></script>
     <script type="module" src="scripts/change-highlights-demo.js"></script>-->
-    <script type="module" src="scripts/change-sharpness-demo.js"></script>
+    <script type="module" src="scripts/color-conversion-demo.js"></script>
 
 </body>
 

demo/scripts/color-conversion-demo.js

@@ -0,0 +1,45 @@
+import EditPix from "../../src/editpix.js"
+
+const editpix = new EditPix();
+
+// HEX to RGB
+const blackHex = "#000000";
+console.log(editpix.hexToRgb(blackHex))
+
+const whiteHex = "#fff";
+console.log(editpix.hexToRgb(whiteHex))
+
+const hexColorsArray = ["#000", "#ffffff", "#ff0000"]
+hexColorsArray.forEach(color => {
+    console.log(editpix.hexToRgb(color))
+});
+
+
+//RGB to HEX
+const blackRgb = { r: 0, g: 0, b: 0 }
+console.log(editpix.rgbToHex(blackRgb.r, blackRgb.g, blackRgb.b))
+
+// convert directly
+console.log(editpix.rgbToHex(255, 255, 255))    //white
+
+const rgbColorsArray = [{ r: 0, g: 0, b: 0 }, { r: 255, g: 0, b: 0 }]
+rgbColorsArray.forEach(color => {
+    console.log(editpix.rgbToHex(color.r, color.g, color.b))
+});
+
+// RGB to HSL
+const blackRgb_ = { r: 0, g: 0, b: 0 }
+console.log(editpix.rgbToHsl(blackRgb_.r, blackRgb_.g, blackRgb_.b))
+
+//convert directly
+console.log(editpix.rgbToHsl(255, 255, 255))    //white
+console.log(editpix.rgbToHsl(255, 0, 0))    //red
+
+
+//HSL to RGB
+const blackHsl = { h: 0, s: 0, l: 0 }
+console.log(editpix.hslToRgb(blackHsl.h, blackHsl.s, blackHsl.l))
+
+//convert directly
+console.log(editpix.hslToRgb(0, 0, 100))    //white
+console.log(editpix.hslToRgb(0, 100, 50))    //red

src/editpix.js

@@ -98,12 +98,12 @@ EditPix.prototype.getHigherContrast = (color) => {
     return higherColorContrast(color);
 }
 
-EditPix.prototype.convertToHex = (colors) => {
-    return Array.isArray(colors[0]) ? utils.rgbToHex(colors) : utils.rgbToHex([colors]);
+EditPix.prototype.rgbToHex = (r, g, b) => {
+    return utils.rgbToHex(r, g, b);
 }
 
-EditPix.prototype.convertToRgb = (colors) => {
-    return Array.isArray(colors) ? utils.hexToRgb(colors) : utils.hexToRgb([colors]);
+EditPix.prototype.hexToRgb = (hexColor) => {
+    return utils.hexToRgb(hexColor);
 }
 
 EditPix.prototype.toOptimizedContrast = (image) => {

src/utils.js

@@ -16,29 +16,21 @@ function removeAlphaSerialized(pixelArray) {
     return result;
 }
 
-function rgbToHex(rgbColors) {
-    let hexColors = [];
-    rgbColors.forEach(color => {
-        hexColors.push("#" + (1 << 24 | color[0] << 16 | color[1] << 8 | color[2]).toString(16).slice(1));
-    });
-    return hexColors;
+function rgbToHex(r, g, b) {
+    return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
 }
 
-function hexToRgb(hexColors) {
-    let rgbColors = [];
-    hexColors.forEach(color => {
-        color = color.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
-        const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-        if (!match) {
-            throw new Error("Invalid hex color: " + color);
-        }
-        rgbColors.push([
-            parseInt(match[1], 16),
-            parseInt(match[2], 16),
-            parseInt(match[3], 16)
-        ]);
-    });
-    return rgbColors;
+function hexToRgb(hexColor) {
+    hexColor = hexColor.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
+    const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
+    if (!match) {
+        throw new Error("Invalid hex color: " + hexColor);
+    }
+    return {
+        r: parseInt(match[1], 16),
+        g: parseInt(match[2], 16),
+        b: parseInt(match[3], 16)
+    }
 }
 
 function validate(quality, colorNumber) {
@@ -81,18 +73,18 @@ function rgbToHsl(r, g, b) {
         const d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch (max) {
-        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-        case g: h = (b - r) / d + 2; break;
-        case b: h = (r - g) / d + 4; break;
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
         }
         h /= 6;
     }
 
-    return [
-        Math.round(h * 360),
-        Math.round(s * 100),
-        Math.round(l * 100)
-    ];
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
 }
 
 /**
@@ -111,7 +103,11 @@ function hslToRgb(h, s, l) {
     const a = s * Math.min(l, 1 - l);
     const f = n =>
         l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-    return [255 * f(0), 255 * f(8), 255 * f(4)];
+    return {
+        r: 255 * f(0),
+        g: 255 * f(8),
+        b: 255 * f(4)
+    };
 }
 
 export default {