Today I Learned #26

paintJS - saving file

paintJS를 통해 사용자가 그린 그림을 save 버튼을 통하여 저장하는 기능을 구현해보았다.

선언 및 정의

const saveBtn = document.getElementById("jsSave"); 를 통해 saveBtn을 선언해주었다. 이미 canvas 내부에 우클릭을 하고, save image as 메뉴를 통하여 저장을 하면, fill 기능을 사용하지 않는 경우 배경이 비어있는 상태로 저장되는 현상이 발생함을 확인할 수 있다. 이는 canvas의 기본 배경이 채워지지 않은 상태이기 때문인데, 기존 INITIAL_COLOR로 fillStyle을 지정하기 이전에,

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

를 통해 하얀색으로 canvas를 채워준 이후에 저장을 하면 해당 현상을 해결할 수 있다.

handleCM

기본적인 선언을 마쳤다면, 앞서 언급했던 우클릭+save image as를 통해 파일을 저장하는 방법을 막고 save 버튼을 통해 파일의 저장을 하도록 유도해보겠다. 꼭 필요한 과정은 아니지만, javascript를 활용하여 마우스 우클릭을 통제하는 방법을 연습하기 위하여 진행하였다. canvas.addEventListener("contextmenu", handleCM)을 통해 마우스 우클릭 이벤트가 발생하면 handleCM 함수가 발생하도록 하였다. handleCM의 내부에서는 인자로서 전달받은 event에 대해 event.preventDefault();를 실행하도록 하여, 우클릭이 정상적으로 context menu를 표현하지 않도록 하였다.

handleSaveClick

앞서 선언해준 saveBtn에 "click" 이벤트가 발생하는 경우 실행되는 콜백 함수 handleSaveClick은 HTMLCanvasElement.toDataURL()의 문서와 같이

canvas.toDataURL(type, encoderOptions);

위와 같은 형태로 사용이 가능하고, const image = canvas.toDataURL("image/png");를 통해서 image안에 해당 data를 선언해주고, HTML <a> 요소를 참고하여, const link = document.createElement("a");로 link 라는 이름의 anchor 요소를 선언하고, 해당 요소의 href와 download를 지정한 후, 아래의 코드와 같이 link.click() 을 실행하도록 하여 저장해준다.

link.href = image;
link.download = "paintJS[🎨]";
link.click();

---

실행결과

해당 화면에서 save 버튼을 클릭한 경우 paintJS[🎨]라는 파일명으로 저장되는 파일