From 042524ab3288659d7b2fc702d9e03aa6d4df9b25 Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Thu, 14 Sep 2023 19:07:11 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=94=94=EC=98=A4=20=EC=BA=A1?=
 =?UTF-8?q?=EC=B2=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/fims/sprt/sprt03010-main.jsp  | 49 +++++++++++++------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03010-main.jsp
index 53df2a32..6b23bb5a 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03010-main.jsp
@@ -69,16 +69,16 @@
 		</div>
 	</div>
 	<div class="card d-inline-flex ms-1" style="width:290px;height:850px;padding: 10px;">
-		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
 			
 		</div>
-		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
 			
 		</div>
-		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
 			
 		</div>
-		<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
+		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
 			
 		</div>
 	</div>
@@ -101,7 +101,6 @@
 <script>
 var openerPageName = "${openerPageName}";
 
-var scaleFactor = 0.25;
 var snapshots = [];
 
 document.getElementById("file").addEventListener('change', function () {
@@ -113,17 +112,21 @@ document.getElementById("video").addEventListener('play', function () {
 });
 
 
-function capture(video, scaleFactor) {
-    if(scaleFactor == null){
-        scaleFactor = 1;
-    }
-    var w = video.videoWidth * scaleFactor;
-    var h = video.videoHeight * scaleFactor;
+function capture(video, scaleForCanvasStyle) {
+
+    var originalW = video.videoWidth;
+    var originalH = video.videoHeight;
+    
     var canvas = document.createElement('canvas');
-        canvas.width  = w;
-        canvas.height = h;
+    
+	canvas.width = originalW;
+	canvas.height = originalH;
+	
+    canvas.style = "width:"+($(video).width() * scaleForCanvasStyle)+"px;"+ "height:"+($(video).height() * scaleForCanvasStyle)+"px;";
+
+    
     var ctx = canvas.getContext('2d');
-        ctx.drawImage(video, 0, 0, w, h);
+    ctx.drawImage(video, 0, 0, originalW, originalH);
     return canvas;
 } 
  
@@ -157,8 +160,22 @@ $("#btnCapture").on("click",function(){
 		return;
 	}
 	
-	var video  = document.getElementById("video");
-    var canvas = capture(video, scaleFactor);
+	var video = document.getElementById("video");
+	var videoStyleW = $(video).width();
+	var videoStyleH = $(video).height();
+	
+	var scaleForCanvasStyleW = 1;
+	if(videoStyleW > 259){
+		scaleForCanvasStyleW = 259/videoStyleW;
+	}
+	var scaleForCanvasStyleH = 1;
+	if(videoStyleH > 142){
+		scaleForCanvasStyleH = 142/videoStyleH;
+	}
+	
+	var scaleForCanvasStyle = scaleForCanvasStyleW < scaleForCanvasStyleH ? scaleForCanvasStyleW : scaleForCanvasStyleH;
+	
+    var canvas = capture(video, scaleForCanvasStyle);
     canvas.ondblclick = function(){
         window.open(this.toDataURL());
     };