[바닐라js로 그림판 만들기] Save Image

이미 canvas에는 오른쪽 마우스를 누르고 이미지를 저장할 수 있다.

 

ctx.fillStyle = "white";

ctx.fillRect(0,0,canvas.width, canvas.height); //캔버스 처음의 배경 색 지정, 이걸 안해주면 사진 저장했을 때 배경이 투명하게 저장이 된다.

 

그런데, css로는 일단 기본 배경이 흰색으로 보이니까 그 상태에서 뭔가 그리고 저장을 하면 흰색배경에 저장이 될 것이라고 예상했는데, javascript에서 다뤄지는 부분은 다르기 때문에 투명한 배경으로 저장이 되는 것을 볼 수 있다. 그래서 위의 코드를 윗부분에 추가를 해주어야 한다.

 

오른쪽 마우스를 눌렀을 때 사진을 저장하고 싶지 않게 할 수도 있을 것이다. 그런 경우에는 oncontextmenu라는 이벤트가 발생한다.

 

canvas.addEventListener("contextmenu", handleRightClick);

다음과 같은 코드를 추가한다.

 

function handleRightClick(event){

    event.preventDefault();

}

preventDefault()를 통해 우클릭을 방지할 수 있다.

우리는 우클릭해서 이미지를 저장하는 방식이 아니라 우리가 만들어놓은 save라는 버튼을 통해 이미지를 다운로드 받을 수 있도록 하고 싶기 때문에 위의 코드를 넣었다.

 

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

다음과 같이 save버튼을 가져온다.

 

if(saveBtn){

    saveBtn.addEventListener("click",handleSaveClick);

}

이벤트를 추가하고 handleSaveClick 함수를 정의한다.

 

이제 가장 먼저 필요한 것은 canvas의 데이터를 image처럼 얻는 것이다.

그것에 해당하는 메소드가 있다. toDataURL이라는 것이다.

 

function handleSaveClick(){

    const image = canvas.toDataURL("image/jpeg");

    console.log(image);

}

이렇게 하고 console을 확인해보면 링크가 나오고, 그걸 누르면 이미지가 나온다.

 

function handleSaveClick(){

    const image = canvas.toDataURL("image/png");

    const link = document.createElement("a");

    link.href = image;

    link.download = "paintJS";

    link.click();

}

 실제로 html상에 존재하지는 않는 a 태그를 만들어서

그 a태그의 href 속성으로는 다운받을 대상이 되는 링크인 image를 넣어주고(link.href = image)

a태그의 속성 중 download를 이용하여 다운을 받는다. 이 때 다운받을 파일의 이름을 지정해줄 수 있다.

link.click()이라는 것은, 크게 보았을 때 save버튼을 클릭했을 때 handleSaveClick 함수가 발생하고 그 때 실제로는 존재하지 않는 a태그인 link가 클릭된다는 것이라고 생각하면 된다.