xit-app
/
fims-web-all
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

비디오 캡처 수정

Browse Source
main
이범준 1 year ago
parent 516711eee3
commit 042524ab32
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File

49
src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03010-main.jsp
Unescape Escape View File

@ -69,16 +69,16 @@
</div> </div>
</div> </div>
<div class="card d-inline-flex ms-1" style="width:290px;height:850px;padding: 10px;"> <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>
<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>
<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>
<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>
</div> </div>
@ -101,7 +101,6 @@
<script> <script>
var openerPageName = "${openerPageName}"; var openerPageName = "${openerPageName}";
var scaleFactor = 0.25;
var snapshots = []; var snapshots = [];
document.getElementById("file").addEventListener('change', function () { 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'); 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'); var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h); ctx.drawImage(video, 0, 0, originalW, originalH);
return canvas; return canvas;
} }
@ -157,8 +160,22 @@ $("#btnCapture").on("click",function(){
return; return;
} }
var video = document.getElementById("video"); 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(){ canvas.ondblclick = function(){
window.open(this.toDataURL()); window.open(this.toDataURL());
}; };

Write Preview
Loading…
Cancel
Save