Merge pull request #23 from studio-YOLO/14-implement-change-shadows

update: fixed change_shadows, add: demo and tests

demo/index.html

@@ -21,9 +21,10 @@
     <script type="module" src="scripts/change_saturation_demo.js"></script>
     <script type="module" src="scripts/change_brightness_demo.js"></script>
     <script type="module" src="scripts/sepia_demo.js"></script>
-    <script type="module" src="scripts/change_opacity_demo.js"></script>
-    <script type="module" src="scripts/resize_image_demo.js"></script>-->
-    <script type="module" src="scripts/color_palette_wasm_demo.js"></script>
+    <script type="module" src="scripts/resize_image_demo.js"></script>
+    <script type="module" src="scripts/change_opacity_demo.js"></script>-->
+    <script type="module" src="scripts/change_shadow_demo.js"></script>
+
 </body>
 
 </html>

demo/scripts/change_shadow_demo.js

@@ -0,0 +1,19 @@
+import EditPix from "../../src/editpix.js";
+
+const editpix = new EditPix();
+
+const url = "images/img7.jpeg";
+
+var image = new Image();
+image.src = url;
+
+//waiting image load
+image.onload = () => {
+
+    editpix.changeShadows(image, -100)
+        .then(resultImage => {
+            document.body.appendChild(image);
+            document.body.appendChild(resultImage);
+        })
+        .catch(error => { console.log(error) })
+}

src/core/change_shadows.js

@@ -1,11 +1,17 @@
-function changeShadows(pixelArray, factor) {
-    for (let i = 0; i < pixelArray.length / 4; i++) {
-        const luminance = (pixelArray[4 * i] + pixelArray[4 * i + 1] + pixelArray[4 * i + 2]) / 3;
+/**
+ *  Function that modifies the pixel array of an image by brightening or darkening the shadow areas by a given factor
+ *  @param {number[]} pixelArray: image that has to be encoded in the format [R, G, B, alpha,..., R, G, B, alpha]
+ *  @param {number[]} factor: the shadow brightening/darkening parameter that will be applied to the image
+ *  @returns {number[]} outputArray: pixel array of the modified image
+ */
+ function changeShadows(pixelArray, factor) {
+    for (let i = 0; i < pixelArray.length; i+=4) {
+        const luminance = (pixelArray[i] + pixelArray[i + 1] + pixelArray[i + 2]) / 3;
 
         if (luminance < 128) {
-            pixelArray[4 * i] *= factor; 
-            pixelArray[4 * i + 1] *= factor; 
-            pixelArray[4 * i + 2] *= factor; 
+            pixelArray[i] += factor * (128 - luminance)/128; 
+            pixelArray[i + 1] += factor * (128 - luminance)/128; 
+            pixelArray[i + 2] += factor * (128 - luminance)/128; 
         }
     }
     return pixelArray;

src/editpix.js

@@ -155,4 +155,11 @@ EditPix.prototype.changeOpacity = (image, alpha) => {
     return imageManager.convertToImage(changeOpacity(pixelArray, alpha), image.naturalWidth, image.naturalHeight);
 }
 
+EditPix.prototype.changeShadows = (image, factor) => {
+    if (factor < -100 || factor > 100)
+        throw new Error("Invalid shadow factor: must be a value between -100 and 100");
+    const pixelArray = imageManager.getPixelArray(image);
+    return imageManager.convertToImage(changeShadows(pixelArray, factor), image.naturalWidth, image.naturalHeight);
+}
+
 export default EditPix;

test/core.test.js

@@ -4,6 +4,7 @@ import optimizeContrast from "../src/core/optimize_contrast.js";
 import changeContrast from "../src/core/change_contrast.js";
 import changeTemperature from "../src/core/change_temperature.js";
 import changeOpacity from "../src/core/change_opacity.js";
+import changeShadows from "../src/core/change_shadows.js"
 import higherColorContrast from "../src/core/higher_contrast.js";
 
 describe('convertToBW function', () => {
@@ -134,6 +135,32 @@ describe('changeOpacity function', () => {
     });
 });
 
+
+describe('changeShadows', () => {
+    test('should return a darkened array if factor is negative and area is a shadow', () => {
+        const testColor1 = [13, 11, 4];
+        const testColor2 = [13, 11, 4];
+        changeShadows(testColor1, -10);
+        expect(testColor1[0]).toBeLessThan(testColor2[0]);
+        expect(testColor1[1]).toBeLessThan(testColor2[1]);
+        expect(testColor1[2]).toBeLessThan(testColor2[2]);
+    });
+    test('should return an unchanged array if factor is 0', () => {
+        const testColor1 = [234, 112, 8];
+        const testColor2 = [234, 112, 8];
+        changeShadows(testColor1, 0);
+        expect(testColor1[0]).toEqual(testColor2[0]);
+        expect(testColor1[1]).toEqual(testColor2[1]);
+        expect(testColor1[2]).toEqual(testColor2[2]);
+    });
+    test('should only darken shadows (luma < 128)', () => {
+        const testColor1 = [173, 114, 255];
+        const testColor2 = [173, 114, 255];
+        changeShadows(testColor1, -5);
+        expect(testColor1[0]).toEqual(testColor2[0]);
+        expect(testColor1[1]).toEqual(testColor2[1]);
+        expect(testColor1[2]).toEqual(testColor2[2]);
+
 describe('higherColorContrast', () => {
     test('should return color with higher contrast for dark input color', () => {
         const darkColor = [10, 20, 30];

test/editpix.test.js

@@ -40,4 +40,23 @@ describe('EditPix convertToHex method', () => {
         const expectedHexColor = ['#ff0000'];
         expect(editPix.convertToHex(rgbColor)).toEqual(expectedHexColor);
     });
+});
+
+describe('EditPix changeShadows method', () => {
+    test('should reject lower out-of-range factors', () => {
+        try {
+            const editPix = new EditPix();
+            editPix.changeShadows([0, 234, 87], 150);
+        } catch (e) {
+            expect(e).toEqual(new Error("Invalid shadow factor: must be a value between -100 and 100"));
+        }
+    });
+    test('should reject upper out-of-range factors', () => {
+        try {
+            const editPix = new EditPix(); 
+            editPix.changeShadows([0, 234, 87], -123);
+        } catch (e) {
+            expect(e).toEqual(new Error("Invalid shadow factor: must be a value between -100 and 100"));
+        }
+    });
 });