From 191ea2c43beb9d660effe696a39027c475b674b4 Mon Sep 17 00:00:00 2001
From: joiyco <joiyco@waiswuaschd.de>
Date: Wed, 4 Nov 2020 13:41:33 +0100
Subject: [PATCH] git push ich HEAD:feature/seriouslyjs -fajusted chroma color
 and added onload

---
 src/js/chromakeying.js | 58 +++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/js/chromakeying.js b/src/js/chromakeying.js
index f05348803..80bd17b88 100644
--- a/src/js/chromakeying.js
+++ b/src/js/chromakeying.js
@@ -86,33 +86,39 @@ function setMainImage(imgSrc) {
     } 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();
+        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;
+            seriously.go();
+            mainImage = new Image();
+            mainImage.src = tmpCanvas.toDataURL('image/png');
+
+            mainImage.onload = function () {
+                drawCanvas();
+            };
         };
+        image.src = imgSrc;
     }
 }