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>
'Tip' 카테고리의 다른 글
| 자바에서 엑셀 사용(apache.poi) (0) | 2021.03.12 |
|---|---|
| JUnit5 참고 (0) | 2021.03.10 |
| 이클립스에서 gradle build시 java버전문제 발생 (0) | 2021.02.23 |
| insert on Conflict (0) | 2021.01.11 |
| svn 로컬 파일들이 없다고 나올 때 (0) | 2020.12.28 |
