optimize canvas size on chroma keying and live keying

Change-Id: I1ece90a1cebe0df45c53d78f4e0218494529daad
andi34 · Dec 19, 2020 · 0093ff5 · 0093ff5
1 parent cbf2f18
commit 0093ff5
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/chromakeying.php b/chromakeying.php
@@ -53,7 +53,7 @@
 <body data-main-image="<?=$mainimage?>">
 	<div class="chromawrapper">
 	<?php if ($keying_possible): ?>
-		<div class="canvasWrapper">
+		<div class="canvasWrapper initial">
 			<canvas id="mainCanvas"></canvas>
 		</div>
 

diff --git a/livechroma.php b/livechroma.php
@@ -49,7 +49,7 @@
 
 		</div>
 
-		<div class="canvasWrapper">
+		<div class="canvasWrapper initial">
 			<canvas id="mainCanvas"></canvas>
 		</div>
 

diff --git a/src/js/chromakeying.js b/src/js/chromakeying.js
@@ -323,4 +323,5 @@ $(document).ready(function () {
 
         $('#mainCanvas').css('height', canvasHeight - diff + 'px');
     }
+    $('.canvasWrapper').removeClass('initial');
 });
diff --git a/src/js/livechroma.js b/src/js/livechroma.js
@@ -250,6 +250,7 @@ function saveImage(cb) {
 }
 
 $('.backgroundPreview').on('click', function () {
+    $('.canvasWrapper').removeClass('initial');
     if ($('.chroma-control-bar').is(':hidden')) {
         $('.chroma-control-bar').show();
         $('.chromaNote').empty();

diff --git a/src/sass/chromakeying.scss b/src/sass/chromakeying.scss
@@ -21,15 +21,18 @@
 }
 
 .canvasWrapper {
-  width: 1000px;
   display: inline-block;
   max-width: 100%;
   background-color: green;
   border: 4px solid $borderColor;
+  &.initial {
+    width: 1000px;
+  }
 }
 
 #mainCanvas {
   display: block;
+  max-height: 650px;
   max-width: 100%;
 }
 

diff --git a/src/sass/live_chromakeying.scss b/src/sass/live_chromakeying.scss
@@ -196,10 +196,12 @@
     position: absolute;
     top: 40px;
     right: 0;
-    width: 950px;
-    max-width: 100%;
+    max-width: 950px;
     max-height: 100%;
     border: 4px solid $borderColor;
+    &.initial {
+      width: 950px;
+    }
   }
 
   .takeChroma,
@@ -260,6 +262,10 @@
     bottom: 0;
     width: 250px;
   }
+
+  #mainCanvas {
+    max-height: 100%;
+  }
 }
 
 @media (max-height: 740px) and (orientation: landscape) {
@@ -273,13 +279,19 @@
 @media (max-width: 1200px) and (orientation: landscape) {
   .canvasWrapper,
   .chromaNote {
-    width: 750px;
+    max-width: 750px;
+    &.initial {
+      width: 750px;
+    }
   }
 }
 
 @media (max-width: 1000px) and (orientation: landscape) {
   .canvasWrapper,
   .chromaNote {
-    width: 650px;
+    max-width: 650px;
+    &.initial {
+      width: 650px;
+    }
   }
 }