반응형
안녕하세요.
이번 시간에는 자바스크립트에서 이미지 파일을 base64로 인코딩하거나
base64 인코딩을 다운받을 수 있는 파일로 디코딩하는 방법에 대해서
간단한 예제로 다루어보도록 하겠습니다.
이미지 파일 -> base64 인코딩
이미지 파일을 input으로 받아 base64로 인코딩하는 함수 예시는 다음과 같습니다.
function convertImageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
이 함수를 실제 HTML에 적용한 사용 사례는 다음과 같습니다.
이 예제에서는 파일을 업로드하면 아래 쪽에 base64 인코딩 결과가 나타납니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Base64 이미지 미리보기 테스트</title>
</head>
<body>
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="이미지 미리보기..." />
<script>
function convertImageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
async function previewFile() {
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
if (file) {
try {
const base64String = await convertImageToBase64(file);
console.log('Base64 문자열:', base64String);
document.querySelector('img').src = base64String;
} catch (error) {
console.error(error);
}
}
}
</script>
</body>
</html>
base64 -> 이미지 파일 디코딩
이번에는 거꾸로 base64로 인코딩된 문자열을
다운로드가 가능한 이미지 파일 형태로 디코딩하는 코드 예시를 살펴보겠습니다.
// Base64 문자열에서 헤더(예: data:image/png;base64,)를 제거하는 함수
function extractBase64Data(dataUrl) {
return dataUrl.split(',')[1];
}
// Base64 문자열을 Blob으로 변환하는 함수
function base64ToBlob(base64Data, contentType = 'image/png') {
const byteCharacters = atob(base64Data);
const byteArrays = [];
const sliceSize = 1024;
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, { type: contentType });
}
// Blob 데이터를 이용하여 파일 다운로드를 실행하는 함수
function downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// 사용 예시
const base64DataUrl = 'data:image/png;base64,...'; // 실제 Base64 문자열
const base64Data = extractBase64Data(base64DataUrl);
const blob = base64ToBlob(base64Data, 'image/png');
downloadBlob(blob, 'downloaded_image.png');
이를 위해서는 base64 인코딩 결과를 Blob 객체로 변환하는 과정이 먼저 선행되어야 합니다.
Blob 객체 변환 이후에 다운로드를 실행하도록 만드는 것이 가능하며,
전체 과정은 위에서 다룬 코드 스니펫을 참고해주시면 됩니다.
이 글이 자바스크립트에서 이미지 파일을 다루는 과정에 도움이 되셨기를 기원합니다.
잘 봐주셔서 감사합니다.
'JavaScript & React > JS 웹 개발' 카테고리의 다른 글
| 브라우저에 설정된 언어를 기준으로 웹사이트 기본 언어 설정하기 예제 (0) | 2023.09.10 |
|---|---|
| 웹사이트 언어 설정 메뉴 만들기 방법(다국어 사이트 생성 예제) (1) | 2023.09.09 |