비디오 캡처 수정

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) {
+function capture(video, scaleForCanvasStyle) {
-    if(scaleFactor == null){
+
-        scaleFactor = 1;
+    var originalW = video.videoWidth;
-    }
+    var originalH = video.videoHeight;
-    var w = video.videoWidth * scaleFactor;
+    
-    var h = video.videoHeight * scaleFactor;
     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;
 } 
  
@@ -158,7 +161,21 @@ $("#btnCapture").on("click",function(){
 	}
 	
 	var video = document.getElementById("video");
-    var canvas = capture(video, scaleFactor);
+	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());
     };