canvas drawImage 사이즈 관련

카메라에서 넘어오는 영상을 canvas 모듈을 이용하여 프레임 단위로 캡처하는 함수를 만들었다.

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');

function frame_capture() {
	const context = canvas.getContext('2d');
    
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    let frame = canvas.toDataURL('image/jpg', 1.0);
}

<canvas style = "position : abosolute; top:850px; left:10px; width:720px; height:480px;" id = "canvas"></canvas>

 

위와 같은 코드로 drawImage 를 실행하면 canvas.width 와 canvas.height 에 300, 150 이 들어가 원하는 사이즈의 이미지가 캡처 되지 않았다.

 

<canvas style = "position : abosulte; top:850px; left:10px;" width = "720px" height = "480px" id = "canvas"></canvas>

 

위 코드처럼 width 와 height 를 style 밖으로 빼주면 원하는 사이즈의 이미지로 캡처가 된다.