Tip
canvas에 이미지 넣을 때 사이즈 맞추기
jw90
2020. 12. 16. 21:36
developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
CanvasRenderingContext2D.drawImage() - Web APIs | MDN
The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an image onto the canvas.void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, s
developer.mozilla.org
일하다가 특정 이미지 위에 좌표 값이 있는 데이터에 따라 네모표시(레이블링 같은)를 해줘야했다.
받는 이미지의 해상도가 일정하지 않아서 canvas와 이미지 크기를 동적으로 맞춰줘야 했음
<body>
<div>
<canvas id='canvas'>
</canvas>
</div>
<script>
const img = new Image();//이미지 객체 생성
//이미지 파일 로드 전에 아래 코드가 실행되면 이미지 크기 값을 제대로 못불러오는 경우가 생겨서
//load 이벤트 걸어 놓았다.
img.addEventListener('load', function(){
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const width = img.width/2; //불러온 이미지 파일의 width값/2
const height = img.height/2; //불러온 이미지 파일의 height값/2
//canvas에 정한 크기 값 넣어준다.
canvas.width = width;
canvas.height = height;
//불러온 이미지 canvas에 그려준다.
ctx.drawImage(img,0,0,width, height);
//박스 그리는 코드
ctx.strokeStyle = 'orange';
ctx.lineWidth = 3;
ctx.strokeRect(245,225,110,80); //원래는 픽셀 좌표 값을 받아옴
});
img.src = './imgs/dog_snowman.jpg';//위에 있는 샘플이미지
</script>
</body>