자바스크립트의 canvas 요소와 drawImage() 메소드를 사용하여 이미지를 그리는 방법은 쉽습니다.
또한 이를 통해 다양한 그래픽을 동적으로 생성할 수 있습니다.
canvas는 HTML5에서 도입된 요소로, 자바스크립트로 그림을 그리거나 이미지를 삽입하는 데 사용됩니다.
Table of Contents
drawImage 기본
canvas 요소는 HTML에 정의하며, 자바스크립트를 사용하여 그림을 그립니다.
이미지를 삽입하려면 CanvasRenderingContext2D.drawImage() 메서드를 사용해야합니다.
이 메소드는 이미지 객체를 캔버스에 그리는 기능을 제공합니다.
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 이미지 객체 생성
const img = new Image();
img.src = 'https://shinyks.com/wp-content/uploads/2023/07/bear_512x512.png'; // 이미지 경로
// 이미지가 로드된 후 캔버스에 그리기
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 캔버스에 이미지 그리기
};
</script>
- canvas.getContext(‘2d’): 2D 렌더링 컨텍스트를 얻습니다. 이미지를 그리려면 2D 컨텍스트가 필요합니다.
- new Image(): 이미지를 로드할 때 사용하는 객체입니다. 이 객체는 이미지를 동적으로 로드할 수 있게 해줍니다.
- img.src: 이미지 파일의 경로를 지정합니다.
- img.onload: 이미지가 로드된 후에 drawImage() 메소드를 호출하여 이미지를 캔버스에 그립니다.
drawImage 크기 변경
앞선 예제에서는 이미지가 너무 커서 캔버스에 다 그려지지 않았는데, 이미지의 크기를 변경하는 방법이 있습니다.
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://shinyks.com/wp-content/uploads/2023/07/bear_512x512.png';
img.onload = function () {
// 원본 이미지 크기를 100x100으로 변경하여 캔버스에 그리기
ctx.drawImage(img, 50, 50, 100, 100); // (x, y, width, height)
};
</script>
- ctx.drawImage(img, 50, 50, 100, 100): 이미지를 캔버스에 그릴 때, (50, 50) 위치에 이미지를 그리며, 이미지 크기는 100×100으로 설정합니다.
drawImage 일부만 그리기
이미지에서 특정 영역만을 캔버스에 그릴 수도 있습니다.
메소드에 가져올 이미지의 위치/크기를 입력하고 캔버스에 그릴 위치/크기를 전달하면 캔버스에 이미지의 일부만 그릴 수 있습니다.
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://shinyks.com/wp-content/uploads/2023/07/bear_512x512.png';
img.onload = function () {
ctx.drawImage(img, 130, 250, 250, 250, 50, 50, 100, 100);
// (이미지 객체, 이미지 x, 이미지 y, 이미지 width, 이미지 height, 캔버스 x, 캔버스 y, 캔버스 width, 캔버스 height)
};
</script>
이번 예제의 매개변수는 조금 복잡합니다.
먼저 drawImage() 메소드에는 9개의 매개변수를 전달해야합니다. 첫 번째 값은 이미지 자체의 객체이고, 다음의 8개의 숫자는 4개 씩 나눠서 구분할 수 있습니다.
앞의 4개 숫자는 이미지를 잘라낼 범위를 지정합니다. 순서대로 x, y, width, height 입니다.
뒤의 4개는 잘라낸 이미지를 캔버스에 그릴 위치와 크기를 나타냅니다. 순서대로 x, y, width, height 입니다.
조금 복잡하게 느껴지지만 이렇게하면 이미지의 원하는 부분을 원하는 위치에 그릴 수 있게됩니다.
이미지와 캔버스의 비율 맞추기
이미지가 캔버스를 꽉 채우도록 비율에 맞춰 크기를 조정할 수 있습니다.
이 경우, 이미지를 그릴 때 비율을 유지하면서 크기를 변경해야 합니다.
<canvas id="myCanvas" width="450" height="250" style="border: 1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://shinyks.com/wp-content/uploads/2023/07/bear_512x512.png';
img.onload = function () {
const imgWidth = img.width;
const imgHeight = img.height;
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const scale = Math.min(canvasWidth / imgWidth, canvasHeight / imgHeight);
const width = imgWidth * scale;
const height = imgHeight * scale;
ctx.drawImage(img, 0, 0, width, height);
};
</script>
비율을 맞추려면 Math.min() 메소드가 필요한데 Math.min(canvasWidth / imgWidth, canvasHeight / imgHeight)과 같이 이미지 크기와 캔버스 크기 비율을 계산하여, 두 비율 중 작은 값을 사용합니다.
이를 통해 이미지가 캔버스를 넘지 않도록 합니다.
이렇게하면 이미지 비율을 유지한 채로 크기가 조정되어 캔버스에 그려집니다.
drawImage 효과 적용하기
이미지를 그린 다음 캔버스에 그림을 그리는 것처럼 다양한 효과를 추가할 수 있습니다.
예를 들면 이미지에 그림자 효과를 줄 수 있습니다.
<canvas id="myCanvas" width="450" height="250" style="border: 1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://shinyks.com/wp-content/uploads/2023/07/bear_512x512.png';
img.onload = function () {
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.drawImage(img, 50, 50, 200, 200);
};
</script>- ctx.shadowColor: 그림자 색상 설정
- ctx.shadowBlur: 그림자 블러 효과 설정
- ctx.shadowOffsetX, ctx.shadowOffsetY: 그림자의 위치를 설정 (X, Y 오프셋)
정리
자바스크립트에서 canvas에 이미지를 삽입하는 방법은 매우 간단하고 다양한 방법으로 이미지를 조작하고 효과를 추가할 수 있습니다.
위에서 소개한 기본적인 사용법 외에도 이미지를 회전하거나 필터를 적용하는 등 다양한 그래픽 작업을 할 수 있습니다.
drawImage() 메소드와 캔버스의 다양한 API를 활용하여 더 많은 창의적인 작업을 할 수 있습니다.