HTML Canvas – 이미지

Canvas 이미지

Canvas에서 이미지를 표시하려면 drawImage() 메서드를 사용한다. 이 메서드는 이미지를 캔버스에 그리는 가장 기본적인 방법이다.

기본 이미지 그리기

drawImage() 메서드를 사용하여 캔버스에 이미지를 그릴 수 있다. 먼저 이미지를 로드한 다음 캔버스에 그린다.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.drawImage(img, 10, 10);

  };

  img.src = "img_the_scream.jpg";

</script>

이 예제에서는 Image 객체를 생성하고 onload 이벤트 핸들러를 설정한다. 이미지가 완전히 로드된 후에만 drawImage() 메서드를 호출하여 캔버스에 그린다.

이미지 크기 조정

drawImage() 메서드에 추가 매개변수를 제공하여 이미지의 크기를 조정할 수 있다.

<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas2");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.drawImage(img, 10, 10, 150, 180);

  };

  img.src = "img_the_scream.jpg";

</script>

이 예제에서는 이미지를 150×180 픽셀 크기로 조정하여 그린다. drawImage(img, x, y, width, height) 형식을 사용한다.

이미지 자르기

drawImage() 메서드의 9개 매개변수 버전을 사용하면 이미지의 일부분만 잘라서 캔버스에 그릴 수 있다.

<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas3");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);

  };

  img.src = "img_the_scream.jpg";

</script>

이 예제에서는 원본 이미지의 (90, 130) 위치에서 50×60 픽셀 영역을 잘라서 캔버스의 (10, 10) 위치에 50×60 크기로 그린다.

drawImage() 매개변수

drawImage() 메서드는 세 가지 다른 형태로 사용할 수 있다.

9개 매개변수 자세한 설명

Canvas를 이미지로 사용하기

다른 캔버스 요소를 이미지 소스로 사용할 수도 있다.

<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas4");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "red";

  ctx.fillRect(10, 10, 50, 50);

  function copy() {

    var c2 = document.getElementById("myCanvas5");

    var ctx2 = c2.getContext("2d");

    ctx2.drawImage(c, 10, 10);

  }

</script>

이 예제에서는 첫 번째 캔버스에 빨간색 사각형을 그린 다음, 두 번째 캔버스에 첫 번째 캔버스의 내용을 복사한다.

비디오를 이미지로 사용하기

HTML5 비디오 요소를 이미지 소스로 사용할 수도 있다.

<video id="video1" controls width="270" autoplay>

  <source src="mov_bbb.mp4" type="video/mp4">

  <source src="mov_bbb.ogg" type="video/ogg">

  브라우저가 HTML5 비디오를 지원하지 않습니다.

</video>

<canvas id="myCanvas6" width="270" height="135" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var v = document.getElementById("video1");

  var c = document.getElementById("myCanvas6");

  var ctx = c.getContext("2d");

  var i;

  v.addEventListener('play', function() {

    i = window.setInterval(function() {

      ctx.drawImage(v, 5, 5, 260, 125);

    }, 20);

  }, false);

  v.addEventListener('pause', function() {

    window.clearInterval(i);

  }, false);

  v.addEventListener('ended', function() {

    clearInterval(i);

  }, false);

</script>

이 예제에서는 비디오가 재생될 때마다 현재 프레임을 캔버스에 그린다. 비디오가 일시정지되거나 끝나면 그리기를 중단한다.

이미지 데이터 조작

Canvas API를 사용하여 이미지의 픽셀 데이터를 직접 조작할 수 있다.

<canvas id="myCanvas7" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas7");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.drawImage(img, 0, 0);

    var imgData = ctx.getImageData(0, 0, c.width, c.height);

    var i;

    for (i = 0; i < imgData.data.length; i += 4) {
      imgData.data[i] = 255 - imgData.data[i];
      imgData.data[i+1] = 255 - imgData.data[i+1];
      imgData.data[i+2] = 255 - imgData.data[i+2];
    }
    ctx.putImageData(imgData, 0, 0);
  };
  img.src = "img_the_scream.jpg";
</script>[/code]



이 예제에서는 이미지를 로드한 후 getImageData()로 픽셀 데이터를 가져와서 색상을 반전시킨 다음 putImageData()로 다시 캔버스에 그린다.

💡 Canvas 이미지 팁:

• 이미지를 사용하기 전에 항상 onload 이벤트를 기다려야 한다

• 크로스 오리진 이미지를 사용할 때는 CORS 정책을 고려해야 한다

• 큰 이미지를 자주 그릴 때는 성능을 위해 이미지를 미리 로드하는 것이 좋다

이미지 회전과 변형
Canvas의 변형 메서드를 사용하여 이미지를 회전시키거나 변형할 수 있다.
[code lang="markup"]<canvas id="myCanvas8" width="300" height="200" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas8");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.save();

    ctx.translate(150, 100);

    ctx.rotate(20 * Math.PI / 180);

    ctx.drawImage(img, -img.width/2, -img.height/2);

    ctx.restore();

  };

  img.src = "img_the_scream.jpg";

</script>

이 예제에서는 이미지를 캔버스 중앙으로 이동시킨 후 20도 회전시켜 그린다. save()와 restore() 메서드를 사용하여 변형을 적용하고 원래 상태로 되돌린다.

이미지 투명도 조절

globalAlpha 속성을 사용하여 이미지의 투명도를 조절할 수 있다.

<canvas id="myCanvas9" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas9");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.globalAlpha = 0.5;

    ctx.drawImage(img, 10, 10);

    ctx.globalAlpha = 1.0;

  };

  img.src = "img_the_scream.jpg";

</script>

이 예제에서는 이미지를 50% 투명도로 그린다. globalAlpha 값은 0(완전 투명)부터 1(완전 불투명)까지 설정할 수 있다.

Canvas에서 이미지를 다루는 방법을 익히면 복잡한 그래픽 애플리케이션이나 게임을 만들 수 있다. 이미지 로딩, 크기 조정, 자르기, 변형 등의 기본 기능을 마스터하면 더 고급 기능도 쉽게 구현할 수 있다.