[javascript] 캔버스(Canvas)로 그림판 만들기(4) 이미지 저장하기

[javascript] 캔버스(Canvas)로 그림판 만들기(1) 캔버스에 선그리기

[javascript] 캔버스(Canvas)로 그림판 만들기(2) 선 색상, 굵기 바꾸기

[javascript] 캔버스(Canvas)로 그림판 만들기(3) 색상 채우기-fillRect()

 

 

 

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

 

 

1. canvas의 데이터를 image 처럼 얻기

 

 

const image = canvas.toDataURL("image/jpeg");
const image = canvas.toDataURL(); // 디폴트는 png파일이다.

 

 

 

 

HTML.CanvasElement.toDataURL()

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

HTMLCanvasElement.toDataURL() - Web APIs | MDN

 

type parameter에 의해 저장된 포맷의 이미지 표현을 포함한 data URI를 반환한다.(디폴트: png)

 

 

 

 

2. 링크 만들기

 

 

const link = document.createElement("a");
link.href = image;
link.download = "PaintIMG[🎨]";

 

 

 

download는 앵커(a) 태그의 속성으로, 브라우저에게 링크로 가는 대신 URL을 다운로드 하라고 지시한다. 

다운로드 되는 파일의 이름을 link.download로 지정해준다. 

 

 

 

3. 클릭 만들기

 

 

 link.click();

 

 

콘솔창에 뜬 링크를 누르면 다운로드 된다.

자동으로 클릭되도록 가짜 클릭을 만들어주면 바로 저장할 수 있다. 

 

 

 

 

 

전체 코드

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