HTML,CSS,JS로 웹 그림판 만들기 완성 (코드)

---

웹 그림판 만들기 1편 보러가기

웹 그림판 만들기 2편 보러가기

웹 그림판 만들기 3편 보러가기

 

완성 코드는 가장 아래에 공개되어 있습니다.

---

 

드디어 HTML, JS, CSS로 만드는 웹 그림판 마지막 완성편입니다! 오예~

 

 

<일단 만들기> 시리즈는

일단 뭐라도 만들어보고 싶은 초보 코더분들을 위해서

만들어 본 시리즈였구요... (저 포함)

개발공부는 책, 인강으로 하는 것보다도

쉬운거부터 하나씩 만들어가면서 배우는 게 큰 것 같습니다.

이런 과정을 지나면 나만의 것을 만들어 포폴을 채울 수 있을 것 같아요.

 

---

 

마지막 편은 SAVE(저장하기) 기능구현하고,

지금까지의 과정 정리하고 끝내겠습니다~

 

SAVE 저장하기 기능

 

이미 canvas기능에서 pixel로 다루고 있기 때문에,

우리는 캔버스를 우클릭 하면 저장할 수 있다는 사실을 알 수 있습니다.

▲ 위와 같이 저장하면 

위와 같이 저장됩니다!!!▲ 

 

 

 

그러니까 기본적으로 있는 기능이고,

우린 그걸 SAVE버튼을 통해 구현해볼거에요.

 

 

그리고 우리가 현재 캔버스의 배경을 지정해주지 않아서,

배경색을 채우지 않고 저장하면 배경이 투명하게 저장됩니다.

그게 좋으시면 그대로 두고 (대신 기본 배경이 검정색으로 보입니다...),

배경색을 하얀색으로 입히고 저장하고 싶다면 app.js에 아래와 같은 코드를 넣어주시면 됩니다.

/*캔버스 사이즈 밑에 작성해주세요*/
ctx.fillStyle = "white";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);

 

index.html에서 저장을 jsSave라고 해놨으니 app.js에서도 해주면 되겠죠.

지금까지 했던 것의 반복! 빠르게 가볼게요.

const saveBtn = document.getElementById("jsSave");

if (saveBtn){
  saveBtn.addEventListener("click", handleSaveClick);
}

---

MDN에서 HTMLCanvasElement.toDataURL() 메소드에 대해 확인해봅니다.

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter.

라고 하네요.  그대로 이용해봅시다.

 

function handleSaveClick() {
  const image = canvas.toDataURL("image/png");
}

저는 png로 하고 싶어서 png로 했는데, jpg도 가능합니다.

아래 사진 참고!

기본 타입이 png이기 때문에 () 이렇게 그냥 비워둬도 png로 저장됩니다~

---

  const link = document.createElement("a");
  link.download = "PaintJS[EXPORT]";
  link.click();

이렇게 가짜로 클릭해서 저장되도록 연결해준겁니다!!

저장하고 실행해볼게요.

이렇게 저장 화면이 정상적으로 출력되고... 저장하면~

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ이렇게 뜨는군요!

---

어떤 걸 했었는지 복기해볼게요.

 

사용 툴 : HTML, CSS, JS (자바스크립트)

만든 것 : 웹에서 작동하는 그림판

주요 기능 : 색 변경하기, 브러쉬 크기 변경하기, 그리기, 칠하기, 저장하기

 

1. 셋업
2. 스타일 설정
3. 캔버스만들기~ 컬러팔레트 만들기~ 버튼 만들기~ 효과 넣기~
4. 2D context로 브러쉬 기능 만들기 (x축,y축이 찍혀서 짧은 선들을 쭉쭉 연결하는 개념)
5. 색 변경하기
6. 브러쉬 사이즈 변경하기
7. 채우기 모드 만들기
8. 이미지 저장 기능 만들기

 

간단한 그림판 하나 만드는 데도 이러한 과정이 걸리네요... 

평일엔 학생! 

주말엔 선생님! 으로 사는 처지라ㅠㅠㅠ

공부도 해야하고, 일도 해야하고~ 정말 매일이 후딱 지나가네요;

 

라고 도전한 내 자신

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

틈틈히 만들었더니 6일 정도 걸린 것 같네요?

이거 보시는 분들은 하루만에 만들 수 있어요~

너무 재밌었던 웹 게시판 만들기 끝!

---

도움되었다면 ❤ 한 번만 꾹 눌러주세요!

힘내서 <일단 만들기> 많이 올려보겠습니다.

 

 

---

사용한 프로그램(소스코드 편집기): Visual Studio Code (a.k.a VScode)

 

참고 : https://nomadcoders.co/

노마드 코더 Nomad Coders

(위 참고의 노마트코더를 보고 만들었습니다. 영상으로 잘 나와있으니 보시는걸 추천합니다.)

 

완성 코드 : https://github.com/Tiaton/paintjs.git

GitHub - Tiaton/paintjs