diff --git a/.gitmodules b/.gitmodules
index 3017030f3..0af580df9 100644
--- a/.gitmodules
+++ b/.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
diff --git a/chromakeying.php b/chromakeying.php
index 15667906b..17790f18f 100644
--- a/chromakeying.php
+++ b/chromakeying.php
@@ -95,7 +95,12 @@
+
+
+
+
+
diff --git a/config/config.inc.php b/config/config.inc.php
index 378dfc787..38f688c10 100644
--- a/config/config.inc.php
+++ b/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;
diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
index 237fcd77e..313578b06 100644
--- a/lib/configsetup.inc.php
+++ b/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',
diff --git a/resources/lang/en.json b/resources/lang/en.json
index e54973391..2f4c79acf 100644
--- a/resources/lang/en.json
+++ b/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. Please note: 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.",
diff --git a/src/js/chromakeying.js b/src/js/chromakeying.js
index 8633d01c5..4390ab118 100644
--- a/src/js/chromakeying.js
+++ b/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);
+ }
}
}
diff --git a/vendor/Seriously b/vendor/Seriously
new file mode 160000
index 000000000..513d2b869
--- /dev/null
+++ b/vendor/Seriously
@@ -0,0 +1 @@
+Subproject commit 513d2b8696b76fe764b3033aa6dc7c99005acccd