Notice
Recent Posts
Recent Comments
Link
투케이2K
120. (javascript/자바스크립트) a 태그 download 사용해 캔버스 canvas 이미지 파일 저장 실시 본문
JavaScript
120. (javascript/자바스크립트) a 태그 download 사용해 캔버스 canvas 이미지 파일 저장 실시
투케이2K 2021. 9. 15. 12:18[개발 환경 설정]
개발 툴 : 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에서 삭제
*/
반응형
'JavaScript' 카테고리의 다른 글
Comments