2.5 Canvas 이미지 처리

Canvas에서 이미지를 사용하는 방법에 대해 알아보겠습니다. PNG, GIF, JPEG 등 브라우저에서 지원하는 모든 형식의 이미지를 불러 올 수 있습니다. 외에도 SVG, video 요소를 이미지로 불러올 수 있으며, 다른 <canvas> 요소 역시 이미지 데이터로 사용할 수 있습니다. 이러한 이미지는 게임 그래픽의 배경이나 다이나믹한 사진 합성을 수행하는 등에 사용할 수 있습니다.

2.5.1 이미지 데이터 사용하기

1. 이미지 불러오기

Canvas에서 이미지를 사용하기위해 다음과 같은 방식으로 이미지 데이터를 불러올 수 있습니다.

새 이미지 요소를 만들어 불러오기

Image() 생성자를 통해 만들어진 이미지에 소스를 불러와 이미지를 가져올 수 있습니다.

const imgElem = new Image(); //새 이미지 element 만들기
imgElem.src = '../images/lovelyCat.jpg'; //source 불러오기

DOM 요소에 접근하여 불러오기

querySelector()와 같은 접근 메서드를 사용하여 DOM에 있는 <video> 요소를 가져올 수 있습니다. 심지어 기존의 요소가 보이지 않더라도 가져올 수 있습니다. 또한 앞서 언급한 <img>와 다른 <canvas> 요소도 같은 방식으로 불러올 수 있습니다.

<video class="video" src="../images/video.mp4" autoplay muted loop></video>
<canvas class="canvas" width="300" height="300"></canvas>

const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');

const videoElem = document.querySelector('video'); //body에 있는 video불러오기

2. 이미지 그리기

앞서 이미지 소스를 불러왔다면, drawImage()를 통해 이미지를 그릴 수 있습니다.

이미지 배치하기