[HTML5 Canvas] 04 캔버스 이미지

✹ 해당 포스팅은 Youtube에 업로드된 1분코딩님의 <HTML5 Canvas 캔버스 라이브 강좌>의 필기입니다.
이 곳을 클릭하시면 유튜브에서 직접 강좌를 들으실 수 있습니다.
대부분의 샘플 코드는 해당 강좌에서 제공되는 코드임을 밝힙니다.

캔버스에 이미지 그리기

캔버스를 사용할 때는 사실 도형API를 통해서 복잡한 구조를 만들기보다는!
일반적으로 이미지 자체를 캔버스 위에 그리는 경우가 많다.

      const imgElem = document.createElement('img');
      const imgElem = new Image();

위의 두 가지 방식으로 이미지를 만들 수 있다.

    <h1>Image</h1>
    <canvas class="canvas" width="600" height="400">이 브라우저는 캔버스를 지원하지 않습니다.</canvas>

    <script>
      const canvas = document.querySelector('.canvas');
      const context = canvas.getContext('2d');

      // const imgElem = document.createElement('img');
      const imgElem = new Image();
      imgElem.src = '../images/ilbuni1.png';
      imgElem.addEventListener('load', () => {
        context.drawImage(imgElem, 50, 50);
        context.drawImage(imgElem, 50, 50, 70, 120);
        context.drawImage(imgElem, 100, 100, 200, 200, 0, 0, 100, 100);
      });
    </script>

로드될 때까지 기다리기!

외부데이터를 가져오기 때문에 이미지들은 로딩될 시간이 필요하다.
캔버스에 이미지를 그리기 위해서는 결국 이미지 로드가 끝나야 한다는 것이다.
canvas에 drawImage를 할 때도 load이벤트를 써서, 로드가 끝났을 때 그림을 그린다.

ctx.drawImage()

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
출처/MDN

drawImage 메소드는 인자의 개수에 따라서 인자의 역할이 결정된다!
☝🏻 일단 drawImage의 첫 인자에는 그릴 대상이 온다.
이 자리에 들어갈 수 있는 것은 우선 세 가지, 이미지, 비디오, 또 다른 캔버스가 있다!

나머지 인자들의 역할은 MDN에서 소개하는 이미지로 설명하면 더 이해가 쉬울듯 싶다!
중요한 건 위와 같이 소스 이미지에서 일부분을 크롭해와서 우리가 생성해놓은 캔버스 태그에도 얹을 수 있다는 점!

미니 그림판 만들기! 👩🏻‍🎨

미니 그림판 만들기 코드에 직접 주석을 달아보자!

      const canvas = document.querySelector('.canvas');
      const context = canvas.getContext('2d');
      const control = document.querySelector('.control');
      const saveBtn = document.querySelector('.save-btn');
      const resultImage = document.querySelector('.result-image');
      let drawingMode; // true일 때만 그리기
      let brush = 'color'; // 'color', 'image'
      let colorVal = 'black'; // 색상

      const imgElem = new Image();
      imgElem.src = '../images/ilbuni2.png';

      // 마우스다운 이벤트가 발생했을 때 드로잉모드를 true로 전환
      function downHandler() {
        drawingMode = true;
      }

      // 마우스업 이벤트가 발생했을 때 드로잉모드를 false로 전환
      function upHandler() {
        drawingMode = false;
      }

      // 드로잉모드가 true이고 마우스 무브 이벤트가 발생하는 동안 그림을 그려준다!
      function moveHandler(이벤트) {
        // 드로잉모드 false이면 그냥 함수 종료!
        if (!drawingMode) return;

        switch (brush) {
            // 색깔버튼을 클릭한 경우
          case 'color':
            context.beginPath();
            context.arc(이벤트.layerX, 이벤트.layerY, 10, 0, Math.PI*2, false);
            context.fill();
            break;
            // 이미지 버튼을 클릭한 경우
          case 'image':
            context.drawImage(imgElem, 이벤트.layerX, 이벤트.layerY, 50, 50);
            break;
        }
      }

      // 버튼 클릭했을 때 어떤 색이나 이미지로 그림을 그려줄지 세팅하는 함수
      function setColor(이벤트) {
        brush = 이벤트.target.getAttribute('data-type');
        // 이미지인지 컬러인지 브러쉬에 설정해준다.
        colorVal = 이벤트.target.getAttribute('data-color');
        // 데이터 컬러로 컬러밸류 설정! 이미지의 경우 undefined임
        context.fillStyle = colorVal;
      }

      //toDataURL 메서드를 이용해 이미지를 저장하는 함수
      function createImage() {
        const url = canvas.toDataURL('image/png');
        const imgElem = new Image();
        imgElem.src = url;
        resultImage.appendChild(imgElem);
      }

      canvas.addEventListener('mousedown', downHandler);
      canvas.addEventListener('mousemove', moveHandler);
      canvas.addEventListener('mouseup', upHandler);
      control.addEventListener('click', setColor);
      saveBtn.addEventListener('click', createImage);

canvas.toDataURL()

메소드이니 일단 공식문서 호출하고 시작...

HTMLCanvasElement.toDataURL () 메서드는 type 매개 변수에 지정된 형식 (기본값은 PNG)으로 이미지 표현이 포함된 데이터 URI를 반환합니다. 반환된 이미지의 해상도는 96dpi입니다.

.color-btn[data-color='black']

.color-btn[data-color='black'] 처음 보는 문법이어서 일단 메모...✍🏼