html

HTML - 캔버스 이미지 삽입

1월 18, 2021

캔버스는 도형이나 텍스트를 그리는 게 전부가 아닙니다. 캔버스에 이미지를 그릴 수 있는 흥미로운 기능을 제공합니다. jpg, bmp, gif 형식 등 브라우저가 지원하는 모든 형식의 이미지를 지원하며 <svg>, <video> 요소를 현재 이미지로 사용할 수 있습니다.

메서드 설 명
drawImage(img, x, y) 이미지를 캔버스에 바로 그리기
  • img: 삽입될 이미지
  • x: 캔버스에서 x좌표로 이동할 거리
  • y: 캔버스에서 y좌표로 이동할 거리
drawImage(img, x, y, w, h) 크기 조정된 이미지를 캔버스에 바로 그리기
  • img: 삽입될 이미지
  • x: 캔버스에서 x좌표로 이동할 거리
  • y: 캔버스에서 y좌표로 이동할 거리
  • w: 조정될 이미지 가로크기.
  • h: 조정될 이미지 세로크기
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 원본 이미지에서 잘라낸 이미지를 캔버스에 바로 그리기
  • img: 삽입될 이미지
  • sx: 원본 이미지 영역의 x좌표로 이동할 거리
  • sy: 원본 이미지 영역의 y좌표로 이동할 거리
  • sWidth: sx좌표에서 잘라낼 이미지 가로크기
  • sHeight: sy좌표에서 잘라낼 이미지 세로크기
  • dx: 캔버스에서 x좌표로 이동할 거리
  • dy: 캔버스에서 y좌표로 이동할 거리
  • dWidth: 조정될 이미지 가로크기
  • dHeight: 조정될 이미지 세로크기

이미지를 그리기 위해서는 이미지를 담을 new Image() 객체를 만드는 일입니다. 그런 다음 .src 를 이용해 이미지를 읽어오는 것입니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 새로운 이미지 객체를 만듬
var img = new Image();
img.onload = function(){
  context.drawImage(img, 10, 10);
}
// 이미지 URL
img.src = 'https://example.com/image/girl-4056684__340.jpg';
</script>


이 코드는 이미지 로딩이 완료되어야 그릴 수 있으므로 img.onload 리스너로 이미지 로딩이 완료되면 drawImage() 를 이용해 이미지를 그리도록 하는 코드입니다. 이미지를 로딩 시키려면 img.src 를 이용합니다. .src 가 이미지를 모두 읽어 들이면 .onload 가 실행되는 것입니다. context.drawImage(img, 10, 10); 에서 img 객체에 든 비트맵 이미지를 원본 크기로 x*y방향으로 10(px)위치에 그립니다. 여기서 onload 리스너를 이용하지 않고 <img> URL로 접근해서 캔버스에 바로 그릴 수도 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<div style="display:none;">
  <img id="target" src='http://example.com/image/girl-4056684__340.jpg'/>
</div>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

context.drawImage(document.getElementById('target'), 0, 0);
</script>



스케일링 이미지

다음은 원본 크기가 너무 크므로 크기를 줄여서 그려보겠습니다. 코드는 위와 같지만 원본 크기를 각 200(px)로 줄여서 그립니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 새로운 이미지 객체를 만듬
var img = new Image();
img.onload = function(){
  context.drawImage(img, 10, 10, 200, 200);
}
// 이미지 URL
img.src = 'https://example.com/image/girl-4056684__340.jpg';
</script>


위 코드는 img 객체에 든 비트맵 이미지를 x*y 방향으로 10(px)위치에 그리되 각 200(px) 크기로 조정하였더니 사진이 약간 찌그러지게 되었습니다. 

아래 코드에서 첫 번째 for문은 가로 방향으로 반복하고, 두 번째 for문은 세로 방향으로 반복합니다. 이미지 크기는 원래 크기보다 작은 각 100*50(px)로 조정하면 캔버스에서 여러 번 반복되어 바둑판 형식의 이미지 배경으로 만들어지게 됩니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 새로운 이미지 객체를 만듬
var img = new Image();
img.onload = function(){
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 3; j++) {
      context.drawImage(img, j * 100, i * 50, 100, 50);
    }
  }
}
// 이미지 URL
img.src = 'http://example.com/image/girl-4056684__340.jpg';
</script>


캔버스에 꽉 찬 그림을 그리려면 width, height 프로퍼티를 이용합니다. 예를 들면 아래와 같이 canvas.width, canvas.height 를 사용하면 전체 배경 이미지가 되는 것입니다.

…
canvas = document.getElementById('mycanvas');
context = canvas.getContext('2d');

var img = new Image();
img.onload = function(){
  context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = 'http://example.com/image/girl-4056684__340.jpg';
…



슬라이싱 이미지

슬라이싱에는 8개의 인수가 들어갑니다. 이것을 이용하면 원본 이미지의 특정 부분만 잘라낸 다음 크기를 조정하여 캔버스에 그릴 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 새로운 이미지 객체를 만듬
var img = new Image();
img.onload = function(){
 context.drawImage(img, 290, 20, 129, 340, 10, 10, 180, 150); 
}
// 이미지 URL
img.src = 'http://example.com/image/girl-4056684__340.jpg';
</script>


위 예제에 사용된 원본 이미지 크기는 509 x 340(px) 입니다. 사람만 잘라낼 것이므로 원본 이미지에서 x축(=sx) 290(px)만큼 이동한 다음 y축(=sy)으로 20(px)만큼 이동합니다. 이동한 위치에서 가로크기(=sWidth) 129(px)만큼 자르고 세로크기(=sHeight) 340(px)만큼 잘라낸 다음 캔버스에서 x*y축 방향으로 각 10(px)만큼 이동한 위치에 잘라낸 이미지를 180*150(px)크기로 조정하여 캔버스에 그립니다.

drawImage()를 이용하면 여러 장의 이미지를 겹치게 할 수 있습니다. 이를테면 액자 이미지를 만들 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

// 새로운 이미지 객체를 만듬
var img01 = new Image();
var img02 = new Image();
img01.onload = function(){
  context.drawImage(img01, 290, 20, 129, 340, 20, 20, 180, 150);
  context.drawImage(img02, 0, 0, 230, 160);
}
// 이미지 URL
img01.src = 'https://example.com/image/girl-4056684__340.jpg';
img02.src = 'http://media.prod.mdn.mozit.cloud/attachments/2012/07/09/242/2ce0b2ba9d8aa1d43a59694c70de9148/Canvas_picture_frame.png';
</script>


Tag:

0 Comments

0 댓글