[JavaScript] 자바스크립트에서 캔버스 그래픽 다운로드하기

211_자바스크립트에서 캔버스 그래픽 다운로드하기

[적용]

• 브라우저에서 생성한 도형을 유저의 시스템에 다운로드하고 싶을 때
• 브라우저에서 가공한 이미지를 유저의 시스템에 다운로드하고 싶을 때

---

[문법]

메소드	의미	반환
new Blob(배열, 옵션)	Blob 객체 생성	Blob 객체

---

[내용]

a 요소를 사용해 캔버스 요소에서 작업한 그래픽을 다운로드 할 수 있다.

이미지 데이터는 toDataURL()을 사용해 Base64 문자열로 가져오며,

바이너리이므로 Blob 객체로 변환한다.

 

JavaScript (부분)                                                                                                                                               main.js

// 캔버스 요소 참조
const canvas2 = document.querySelector('#cnavas-effected');

// 파일 형식과 파일명 지정
const mimeType = 'image/png';
const fileName = 'download.png';

// Base64 문자열 가져오기
const base64 = canvas2.toDataURL(mimeType);

// Base64 문자열을 Unit8Array로 변환
const bin = atob(base64.replace(/^.*,/, ''));
const buffer = new Unit8Array(bin.length);
for (let i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
}

// Blob 생성
const blob = new Blob([buffer.buffer], {
    type: mimeType
});

// 이미지 다운로드
if (window.navigator.msSaveBlob) {
    // IE용
    window.navigator.msSaveBlob(blob, fileName);
} else if (window.URL && window.URL.createObjectURL) {
    // 파이어폭스, 크롬, 사파리용
    const a = document.createElement('a');
    a.download = fileName;
    a.href = window.URL.createObjectURL(blob);
    document.body.removeChild(a);
} else {
    // 기타
    window.open(base64, '_blank');
}

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김