120. (javascript/자바스크립트) a 태그 download 사용해 캔버스 canvas...

120. (javascript/자바스크립트) a 태그 download 사용해 캔버스 canvas...

728x90

반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

[소스 코드]

​

/* [JS 요약 설명] 1. document.getElementById : 특정 객체 ID 값을 지정할 때 사용합니다 2. a 태그 : download 속성을 지정해서 클릭 시 이미지 파일을 저장할 수 있습니다 3. appendChild : 특정 자식을 추가합니다 4. removeChild : 특정 자식을 삭제합니다 5. 로직 : 이미지 저장 함수 호출 >> a 태그 생성 및 속성 지정 >> body에 추가 >> 다운로드 수행 완료 >> body에서 삭제 */ // [이미지 저장 함수] function canvasImageSave(){ console.log(""); console.log("[canvasImageSave] : [start]"); console.log(""); // 캔버스 아이디 지정 실시 // var canvasID = document.getElementById("myBarHeightChart"); // a 태그 생성 실시 var a = document.createElement("a"); // a 태그 create // a 태그 href 속성에 캔버스 data url 지정 a.href = canvasID.toDataURL(); // a 태그에 download 속성 지정 실시 var fileName = "chartImage.png"; a.setAttribute("download", fileName); // a 태그에 다운로드 속성 추가 // body 영역에 a 태그 추가 실시 document.body.appendChild(a); // a 태그 강제로 클릭 이벤트 발생 및 다운 로드 수행 실시 a.click(); // 클릭 이벤트를 발생시켜 다운로드 // body 영역에서 a 태그 다시 삭제 실시 document.body.removeChild(a); };

[결과 출력]

​

[요약 설명]

​

/*

[JS 요약 설명]

1. document.getElementById : 특정 객체 ID 값을 지정할 때 사용합니다

2. a 태그 : download 속성을 지정해서 클릭 시 이미지 파일을 저장할 수 있습니다

3. appendChild : 특정 자식을 추가합니다

4. removeChild : 특정 자식을 삭제합니다

5. 로직 : 이미지 저장 함수 호출 >> a 태그 생성 및 속성 지정 >> body에 추가 >> 다운로드 수행 완료 >> body에서 삭제

*/

728x90

반응형

from http://kkh0977.tistory.com/1215 by ccl(A) rewrite - 2021-09-15 12:27:28