오늘은 이미지 다운로드 미리보기를 만들어보겠습니다.
오늘 알아볼 JavaScript 속성
download
속성은 <a> 태그가 링크된 리소스를 다운로드하기 위해 사용됩니다. 이 속성에 값(이 경우 'downloadedImage.jpg')을 지정하면, 사용자가 링크를 클릭할 때 해당 파일이 다운로드됩니다. 여기서 지정된 값은 다운로드될 파일의 이름을 나타내며, 사용자의 디바이스에 저장될 때 이 이름을 사용합니다. download 속성이 빈 문자열이거나 설정되지 않으면, 원본 파일 이름이 사용됩니다. 하지만 특정 값을 제공하면, 그 값이 다운로드 파일의 이름으로 사용됩니다
appendChild
appendChild 메서드는 한 노드(여기서는 <a> 태그)를 특정 부모 노드의 자식으로 문서에 추가합니다. 이 경우 document.body.appendChild(downloadLink);는 생성된 <a> 태그를 문서의 <body> 태그 내에 자식 노드로 추가합니다. 이는 <a> 태그가 DOM(Document Object Model)에 실제로 존재하게 하며, 이후에 프로그래매틱하게 클릭 이벤트를 발생시키기 위한 준비 단계입니다. <a> 태그가 DOM에 추가되어야만 실제로 클릭할 수 있으며, 이는 다운로드를 시작하는 데 필요합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>이미지 다운로드</h2>
<!-- 미리보기 이미지 -->
<img id="previewImage" src="./test.png" alt="미리보기 이미지" style="width: 100%; max-width: 600px;"/>
<!-- 이미지 다운로드 버튼 -->
<button id="downloadButton">이미지 다운로드</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const imageUrl = './test.png'; // 사용할 이미지 URL
// 다운로드 버튼 클릭 이벤트 설정
document.getElementById('downloadButton').addEventListener('click', function() {
// 동적으로 a 태그를 생성하여 다운로드 링크를 실행
const downloadLink = document.createElement('a');
downloadLink.href = imageUrl;
downloadLink.download = 'downloadedImage.png'; // 다운로드될 파일의 이름 지정
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
});
</script>
</body>
</html>
결과 화면입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하여 나타내기 (0) | 2024.03.10 |
|---|---|
| [Javascript] Color Flipper 만들기 (0) | 2024.03.08 |
| [JavaScript] 마우스 이펙트 만들기 (0) | 2024.02.25 |
| [JavaScript] OpenWeatherMap API 사용하여 입력한 도시의 향후 5일 동안의 날씨 예보 정보 가져오기 (0) | 2024.02.21 |
| [JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 (0) | 2024.02.12 |
