optimize canvas size on chroma keying and live keying

andi34 · andi34 · commit 1536a691902e · 2020-12-21T17:37:49.000+01:00
Change-Id: I1ece90a1cebe0df45c53d78f4e0218494529daad
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;
+    }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -323,4 +323,5 @@ $(document).ready(function () {`
`323`	`323`
`324`	`324`	`$('#mainCanvas').css('height', canvasHeight - diff + 'px');`
`325`	`325`	`}`
	`326`	`+ $('.canvasWrapper').removeClass('initial');`
`326`	`327`	`});`
Original file line number	Diff line number	Diff line change
`@@ -250,6 +250,7 @@ function saveImage(cb) {`
`250`	`250`	`}`
`251`	`251`
`252`	`252`	`$('.backgroundPreview').on('click', function () {`
	`253`	`+ $('.canvasWrapper').removeClass('initial');`
`253`	`254`	`if ($('.chroma-control-bar').is(':hidden')) {`
`254`	`255`	`$('.chroma-control-bar').show();`
`255`	`256`	`$('.chromaNote').empty();`
Original file line number	Diff line number	Diff line change
`@@ -21,15 +21,18 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.canvasWrapper {`
`24`		`- width: 1000px;`
`25`	`24`	`display: inline-block;`
`26`	`25`	`max-width: 100%;`
`27`	`26`	`background-color: green;`
`28`	`27`	`border: 4px solid $borderColor;`
	`28`	`+ &.initial {`
	`29`	`+ width: 1000px;`
	`30`	`+ }`
`29`	`31`	`}`
`30`	`32`
`31`	`33`	`#mainCanvas {`
`32`	`34`	`display: block;`
	`35`	`+ max-height: 650px;`
`33`	`36`	`max-width: 100%;`
`34`	`37`	`}`
`35`	`38`