Revert "Remove Marvinj", make Seriously.js optional available

This reverts commit 21f4575.

Change-Id: I0d620f96a26f08336470c74fdd4f68d1fcccb854

chromakeying.php

@@ -94,8 +94,12 @@
 	<script src="node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="api/config.php"></script>
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
+	<?php if ($config['chroma_keying_variant'] === 'marvinj'): ?>
+	<script type="text/javascript" src="node_modules/marvinj/marvinj/release/marvinj-1.0.js"></script>
+	<?php else:?>
 	<script type="text/javascript" src="vendor/Seriously/seriously.js"></script>
 	<script type="text/javascript" src="vendor/Seriously/effects/seriously.chroma.js"></script>
+	<?php endif; ?>
 	<script type="text/javascript" src="resources/js/chromakeying.js"></script>
 	<script type="text/javascript" src="resources/js/theme.js"></script>
 	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>

config/config.inc.php

@@ -50,6 +50,7 @@
 $config['collage_layout'] = '2x2'; // possible values are '2x2' or '2x4'
 $config['collage_background'] = '../resources/img/frames/DefaultCollageBackground.png';
 $config['chroma_keying'] = false;
+$config['chroma_keying_variant'] = 'marvinj'; // possible values: 'marvinj', 'seriouslyjs'
 $config['use_collage'] = true;
 $config['continuous_collage'] = true;
 $config['background_image'] = null;

lib/configsetup.inc.php

@@ -235,6 +235,16 @@
 			'name' => 'chroma_keying',
 			'value' => $config['chroma_keying']
 		],
+		'chroma_keying_variant' => [
+			'type' => 'select',
+			'name' => 'chroma_keying_variant',
+			'placeholder' => $defaultConfig['chroma_keying_variant'],
+			'options' => [
+				'marvinj' => 'MarvinJ',
+				'seriouslyjs' => 'Seriously.js'
+			],
+			'value' => $config['chroma_keying_variant']
+		],
 		'use_collage' => [
 			'type' => 'checkbox',
 			'name' => 'use_collage',

package.json

@@ -45,6 +45,7 @@
     "gulp": "4.0.2",
     "gulp-sass": "4.1.0",
     "jquery": "^3.5.1",
+    "marvinj": "^1.0.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "rpio": "^2.1.1",

resources/lang/en.json

@@ -59,6 +59,7 @@
   "general": "General",
   "general_camera_mode": "Camera facing mode",
   "general_cheese_time": "Cheeeeeeeese!-Timer:",
+  "general_chroma_keying_variant": "Keying algorithm",
   "general_cntdwn_time": "Countdown timer:",
   "general_collage_background": "Path to the background for \"2x4 + background image\" collage",
   "general_collage_cntdwn_time": "Collage-countdown timer:",
@@ -152,6 +153,7 @@
   "manual_gallery_pswp_bgOpacity": "Background opacity, low values make the background more transparent.",
   "manual_general_camera_mode": "Choose between front- or back facing camera mode of your device cam.",
   "manual_general_cheese_time": "Set a time to display \"Cheeeeeeeese!\" after the countdown.",
+  "manual_general_chroma_keying_variant": "Choose between different chromakeying algorithms. <b>Please note:</b> Seriously.js requires a browser that supports WebGL.",
   "manual_general_cntdwn_time": "Set your countdown time.",
   "manual_general_collage_background": "Enter the path of the background which is applied to your collage on \"2x4 + background image\" collage layout.",
   "manual_general_collage_cntdwn_time": "Set your countdown time between pictures while taking a collage.",

scripts/pack-build.js

@@ -75,6 +75,8 @@ function createArchive(fileName, archive) {
     archive.file('node_modules/github-markdown-css/license');
     archive.file('node_modules/jquery/LICENSE.txt');
     archive.directory('node_modules/jquery/dist/');
+    archive.file('node_modules/marvinj/LICENSE');
+    archive.directory('node_modules/marvinj/marvinj/release/');
     archive.file('node_modules/normalize.css/LICENSE.md');
     archive.file('node_modules/normalize.css/normalize.css');
     archive.file('node_modules/whatwg-fetch/LICENSE');

src/js/chromakeying.js

@@ -1,4 +1,4 @@
-/* globals Seriously i18n */
+/* globals MarvinColorModelConverter AlphaBoundary MarvinImage i18n Seriously */
 /* exported setBackgroundImage */
 let mainImage;
 let mainImageWidth;
@@ -10,36 +10,110 @@ let target;
 let chroma;
 let seriouslyimage;
 
+function greenToTransparency(imageIn, imageOut) {
+    for (let y = 0; y < imageIn.getHeight(); y++) {
+        for (let x = 0; x < imageIn.getWidth(); x++) {
+            const color = imageIn.getIntColor(x, y);
+            const hsv = MarvinColorModelConverter.rgbToHsv([color]);
+
+            if (hsv[0] >= 60 && hsv[0] <= 200 && hsv[1] >= 0.2 && hsv[2] >= 0.2) {
+                imageOut.setIntColor(x, y, 0, 127, 127, 127);
+            } else {
+                imageOut.setIntColor(x, y, color);
+            }
+        }
+    }
+}
+
+function reduceGreen(image) {
+    for (let y = 0; y < image.getHeight(); y++) {
+        for (let x = 0; x < image.getWidth(); x++) {
+            const r = image.getIntComponent0(x, y);
+            const g = image.getIntComponent1(x, y);
+            const b = image.getIntComponent2(x, y);
+            const color = image.getIntColor(x, y);
+            const hsv = MarvinColorModelConverter.rgbToHsv([color]);
+
+            if (hsv[0] >= 60 && hsv[0] <= 130 && hsv[1] >= 0.15 && hsv[2] >= 0.15) {
+                if (r * b != 0 && (g * g) / (r * b) > 1.5) {
+                    image.setIntColor(x, y, 255, r * 1.4, g, b * 1.4);
+                } else {
+                    image.setIntColor(x, y, 255, r * 1.2, g, b * 1.2);
+                }
+            }
+        }
+    }
+}
+
+function alphaBoundary(imageOut, radius) {
+    const ab = new AlphaBoundary();
+    for (let y = 0; y < imageOut.getHeight(); y++) {
+        for (let x = 0; x < imageOut.getWidth(); x++) {
+            ab.alphaRadius(imageOut, x, y, radius);
+        }
+    }
+}
+
 function setMainImage(imgSrc) {
-    const image = new Image();
-    image.src = imgSrc;
-    mainImageWidth = image.width;
-    mainImageHeight = image.height;
-
-    // create tmpcanvas and size it to image size
-    const tmpCanvas = document.createElement('canvas');
-    tmpCanvas.width = mainImageWidth;
-    tmpCanvas.height = mainImageHeight;
-    tmpCanvas.id = 'tmpimageout';
-
-    // append Canvas for Seriously to chromakey the image
-    // eslint-disable-next-line no-unused-vars
-    const body = document.getElementsByTagName('body')[0];
-    document.body.appendChild(tmpCanvas);
-
-    seriously = new Seriously();
-    target = seriously.target('#tmpimageout');
-    seriouslyimage = seriously.source(image);
-    chroma = seriously.effect('chroma');
-    chroma.source = seriouslyimage;
-    target.source = chroma;
-    seriously.go();
-    mainImage = new Image();
-    mainImage.src = tmpCanvas.toDataURL('image/png');
-
-    mainImage.onload = function () {
-        drawCanvas();
-    };
+    if (config.chroma_keying_variant === 'marvinj') {
+        const image = new MarvinImage();
+        image.load(imgSrc, function () {
+            mainImageWidth = image.getWidth();
+            mainImageHeight = image.getHeight();
+
+            const imageOut = new MarvinImage(image.getWidth(), image.getHeight());
+
+            //1. Convert green to transparency
+            greenToTransparency(image, imageOut);
+
+            // 2. Reduce remaining green pixels
+            reduceGreen(imageOut);
+
+            // 3. Apply alpha to the boundary
+            alphaBoundary(imageOut, 6);
+
+            const tmpCanvas = document.createElement('canvas');
+            tmpCanvas.width = mainImageWidth;
+            tmpCanvas.height = mainImageHeight;
+            imageOut.draw(tmpCanvas);
+
+            mainImage = new Image();
+            mainImage.src = tmpCanvas.toDataURL('image/png');
+            mainImage.onload = function () {
+                drawCanvas();
+            };
+        });
+    } else {
+        const image = new Image();
+        image.src = imgSrc;
+        mainImageWidth = image.width;
+        mainImageHeight = image.height;
+
+        // create tmpcanvas and size it to image size
+        const tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = mainImageWidth;
+        tmpCanvas.height = mainImageHeight;
+        tmpCanvas.id = 'tmpimageout';
+
+        // append Canvas for Seriously to chromakey the image
+        // eslint-disable-next-line no-unused-vars
+        const body = document.getElementsByTagName('body')[0];
+        document.body.appendChild(tmpCanvas);
+
+        seriously = new Seriously();
+        target = seriously.target('#tmpimageout');
+        seriouslyimage = seriously.source(image);
+        chroma = seriously.effect('chroma');
+        chroma.source = seriouslyimage;
+        target.source = chroma;
+        seriously.go();
+        mainImage = new Image();
+        mainImage.src = tmpCanvas.toDataURL('image/png');
+
+        mainImage.onload = function () {
+            drawCanvas();
+        };
+    }
 }
 
 // eslint-disable-next-line no-unused-vars
@@ -79,8 +153,12 @@ function drawCanvas() {
     }
 
     if (typeof mainImage !== 'undefined' && mainImage !== null) {
-        //important to fetch tmpimageout
-        ctx.drawImage(document.getElementById('tmpimageout'), 0, 0);
+        if (config.chroma_keying_variant === 'marvinj') {
+            ctx.drawImage(mainImage, 0, 0);
+        } else {
+            //important to fetch tmpimageout
+            ctx.drawImage(document.getElementById('tmpimageout'), 0, 0);
+        }
     }
 }
 

yarn.lock

@@ -3333,6 +3333,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marvinj@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/marvinj/-/marvinj-1.0.0.tgz#5e1e0663f4e605a5966d3537c1a41fd22589c8b5"
+  integrity sha512-+afDa86Pml2BlDt2lEn+xZUZ6r4q+aQvxSmWq37M4lQ4SraBJcKlbm+wDamzXTvW7OmeK0mkWdjRB4R3PAPFjA==
+
 matchdep@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"