[TIL-111] 노마드코더 그림판(JS) 클론코딩 #2.4~#2.7 (완강)

#2 자바스크립트

브러시 사이즈

• range <input>에 "input" 이벤트
  • event.target.value로 input의 range 값 구함.
  • ctx.lineWidth 값을 range 값으로 override.

 

filling mode

• mode 버튼
  
  • fill : 전체 캔버스에 색상 채움.
  • paint : 캔버스에 선 그림.
  • "fill"이라 써있는 버튼 클릭하면 "paint"로 바뀌게 함.
  • filling 변수 만들어, false/true 껐다켰다 함.
• fill 실행
  • fillRect(x, y, w, h) : width와 height로 결정된 사이즈로 (x, y) 위치에 색칠된 사각형 그림.
  • fillStyle : line을 위한 strokeStyle로는 사각형의 색깔을 바꾸지 못함.

 

이미지 저장

• 캔버스 > 우클릭 : "이미지를 다른 이름으로 저장"
  • 캔버스는 픽셀을 다루기 때문에 기본적으로 이미지를 만듦.
  • 만들어진 이미지를 다운로드하는 기능이 기본 내장되어있음.
  • 우클릭으로 이미지 저장하지 못하게 하기
    • "contextmenu" 이벤트를 preventDefault함.

      function handleCM(event) {
        event.preventDefault();
      }

• 그런데 캔버스의 배경색을 설정하지 않아서 배경은 투명하게 비어있는 버그 있음.
  • 캔버스에 디폴트로 하얀 사각형을 채움.

  • ctx.fillStyle = "white";
    ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);

    • "white" 색상명은 문자열이므로 따옴표해야 함. 컬러코드일 때도 마찬가지.
• save 버튼 : 클릭하면 캔버스 이미지 저장하기
  • toDataURL("파일형식") : 캔버스의 데이터를 이미지처럼 얻기. 파일형식은 기본값이 png.
  • download : <a>의 속성 중 하나. 이 속성에 name을 부여하면, 브라우저가 href에 부여된 링크를 다운로드함.

  • function handleSaveClick() {
      const image = canvas.toDataURL("image/jpeg");
      const link = document.createElement("a");
      link.href = image;
      link.download = "PaintJS[EXPORT]";
      link.click();
    }

    • toDataURL로 얻은 이미지 링크를 가진 <a> 태그를 만듦.
    • 가짜로 click() 시켜서 download 속성의 값을 파일명으로 갖는 이미지가 다운로드되게 함.