download
![[JS] SVG 다운로드 (내보내기), PNG로 변환](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbDUORe%2FbtrLugqpQYK%2FHYegiIckUZ8QEkRCeUCim0%2Fimg.png)
[JS] SVG 다운로드 (내보내기), PNG로 변환
SVG 다운로드 const $svg = document.querySelector("svg"); const data = new XMLSerializer().serializeToString($svg); const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); const $link = document.createElement("a"); $link.download = "export.svg"; $link.href = URL.createObjectURL(blob); $link.click(); SVG의 텍스트 데이터를 추출해 Blob 객체를 만들어주고 URL.createObjectURL 메서드를 이용한 다운로드 URL을 사용해 다운로드하는 코드입니다..
![[JS] 캔버스(Canvas) 이미지 다운로드](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcARsMp%2FbtrJ8ncTVhR%2FBY079MOgluC657irwDOXPk%2Fimg.png)
[JS] 캔버스(Canvas) 이미지 다운로드
A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다. 예제 코드 See the Pen drawing by hyukson (@hyukson) on CodePen. 코드 // 다운로드할 캔버스 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 메서드..