feature (chromakeying): switch to seriously.js

.gitmodules

@@ -7,3 +7,6 @@
 [submodule "vendor/PhotoSwipe"]
 	path = vendor/PhotoSwipe
 	url = https://github.com/andi34/PhotoSwipe
+[submodule "vendor/Seriously"]
+	path = vendor/Seriously
+	url = https://github.com/brianchirls/Seriously.js

chromakeying.php

@@ -95,7 +95,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['chroma_size'] = '1500px';
 $config['use_collage'] = true;
 $config['continuous_collage'] = true;

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']
+		],
 		'chroma_size' => [
 			'type' => 'select',
 			'name' => 'chroma_size',

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_chroma_size": "Chromakeying size",
   "general_cntdwn_time": "Countdown timer:",
   "general_collage_background": "Path to the background for \"2x4 + background image\" collage",
@@ -153,6 +154,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_chroma_size": "Choose chromakeying size: S = max 1000px, M = max 1500px, L = max 2000px, XL = max 2500px",
   "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.",

src/js/chromakeying.js

@@ -1,10 +1,14 @@
-/* globals MarvinColorModelConverter AlphaBoundary MarvinImage i18n */
+/* globals MarvinColorModelConverter AlphaBoundary MarvinImage i18n Seriously */
 /* exported setBackgroundImage */
 let mainImage;
 let mainImageWidth;
 let mainImageHeight;
 let backgroundImage;
 let isPrinting = false;
+let seriously;
+let target;
+let chroma;
+let seriouslyimage;
 
 function greenToTransparency(imageIn, imageOut) {
     for (let y = 0; y < imageIn.getHeight(); y++) {
@@ -51,33 +55,72 @@ function alphaBoundary(imageOut, radius) {
 }
 
 function setMainImage(imgSrc) {
-    const image = new MarvinImage();
-    image.load(imgSrc, function () {
-        mainImageWidth = image.getWidth();
-        mainImageHeight = image.getHeight();
+    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());
+            const imageOut = new MarvinImage(image.getWidth(), image.getHeight());
 
-        //1. Convert green to transparency
-        greenToTransparency(image, imageOut);
+            //1. Convert green to transparency
+            greenToTransparency(image, imageOut);
 
-        // 2. Reduce remaining green pixels
-        reduceGreen(imageOut);
+            // 2. Reduce remaining green pixels
+            reduceGreen(imageOut);
 
-        // 3. Apply alpha to the boundary
-        alphaBoundary(imageOut, 6);
+            // 3. Apply alpha to the boundary
+            alphaBoundary(imageOut, 6);
 
-        const tmpCanvas = document.createElement('canvas');
-        tmpCanvas.width = mainImageWidth;
-        tmpCanvas.height = mainImageHeight;
-        imageOut.draw(tmpCanvas);
+            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();
+            mainImage = new Image();
+            mainImage.src = tmpCanvas.toDataURL('image/png');
+            mainImage.onload = function () {
+                drawCanvas();
+            };
+        });
+    } else {
+        const image = new Image();
+        image.src = imgSrc;
+        image.onload = function () {
+            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;
+            const r = 98 / 255;
+            const g = 175 / 255;
+            const b = 116 / 255;
+            chroma.screen = [r, g, b, 1];
+            seriously.go();
+            mainImage = new Image();
+            mainImage.src = tmpCanvas.toDataURL('image/png');
+
+            mainImage.onload = function () {
+                drawCanvas();
+            };
         };
-    });
+        image.src = imgSrc;
+    }
 }
 
 // eslint-disable-next-line no-unused-vars
@@ -117,7 +160,12 @@ function drawCanvas() {
     }
 
     if (typeof mainImage !== 'undefined' && mainImage !== null) {
-        ctx.drawImage(mainImage, 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);
+        }
     }
 }