[JS] 캔버스(Canvas) 이미지 다운로드

 

A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다.

 

예제 코드

 

 

코드

// 다운로드할 캔버스
const $canvas = document.querySelector("canvas");

// A DOM 생성
const $link = document.createElement("a");

$link.download = "파일명.png";
$link.href = $canvas.toDataURL("image/png");

// element에 마우스 클릭
$link.click();

document.createElement 메서드로 가상의 A DOM 요소를 생성해줍니다. 해당 a태그에 download 속성을 부여함으로써, 링크 이동 대신에 다운로드 기능을 이용할 수 있습니다.

 

도움받은 자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

<a> - HTML: Hypertext Markup Language | MDN

 

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/click

HTMLElement.click() - Web API | MDN