120. (javascript/자바스크립트) a 태그 download 사용해 캔버스 canvas 이미지 파일 저장 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

---

[소스 코드]

​

    <script>          

        /*
        [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("");

            // 캔버스 아이디 지정 실시
            // <canvas id="myBarHeightChart"></canvas> 
            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);
        };

                
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

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

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

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

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

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

*/

---