[HTML/Script] Canvas 이미지 다운로드

html 파일에 canvas를 이용해서 다운로드를 하는 방법

 

script.js

const canvas = document.getElementById('캔버스ID');
const ctx = canvas.getContext('2d');

// 다운로드 함수명
function downloadImage() {
    const image = canvas.toDataURL("image/png");
    
    // Create a temporary anchor element
    const link = document.createElement('a');
    link.href = image;
    link.download = '파일명.png';
    
    link.click();
}

 

html에서 그린 canvas를 그리고 해당 내용을 위의 js의 내용을 맞춰서 작성을 해주면,

canvas에 그려진 이미지를 다운로드할 수 있다.