JAVASCRIPT 인터넷 canvas 이미지를 다운로드하는 방법 (toDataURL)
페이지 정보
조회 143회
작성일 25-08-26 09:46
브라우저 개발자 도구를 이용해 페이지의 canvas 이미지를 저장하는 방법이다. Elements 패널에서 canvas를 찾아 "Store as Global Variable"로 저장한 뒤, 콘솔에서 canvas.toDataURL("image/png")로 이미지 데이터를 추출하고 a 태그의 download 속성으로 파일로 저장한다. cross-origin 이미지로 toDataURL()이 실패하는 경우의 대안도 설명한다.
- Elements 패널에서 <canvas> 태그를 찾고 오른쪽에서 스타일 또는 속성을 확인하세요.
- 우클릭 메뉴에서 “Store as Global Variable”을 선택합니다.
- 콘솔에서 위와 같은 방법(canvas.toDataURL())으로 이미지 데이터를 추출 후 저장 가능합니다.
- canvas 내부에 이미지가 그려지는 방식에 따라 보안상 이유로 toDataURL()이 실패할 수 있습니다. (예: Cross-Origin 이미지가 캔버스에 포함된 경우)
- 만약 toDataURL()이 반환되지 않거나 오류가 발생하면 이미지 소스 자체를 따로 다운로드해야 할 수 있습니다.
var canvas = $0; // $0는 마지막 선택된 요소를 가리킵니다.
var dataURL = canvas.toDataURL("image/png");
var a = document.createElement('a');
a.href = dataURL;
a.download = 'canvas-image.png'; // 저장될 파일명 지정
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
canvas 요소 제대로 선택했는지 확인
- var canvas = $0; 에서 $0이 실제 <canvas> 요소인지 확인하세요.
- 콘솔에 console.log(canvas); 입력해 보고 canvas 요소 객체가 잘 나오는지 확인해보세요.
직접 data URL을 새 탭에 복사해서 열기
- toDataURL()이 정상적으로 결과를 반환하면, dataURL 자체가 엄청 길 수도 있는데, 콘솔에 들어오는 문자열을 다 복사해서 새 탭 주소창에 붙여넣기 하면 이미지가 나옵니다.