JavaScript에서 이미지를 Base64 데이터 URL로 변환하는 방법

JavaScript를 사용하여 JPG 및 PNG 이미지를 Base64 데이터 URL로 쉽게 변환할 수 있습니다. 방법을 알려드리겠습니다.

데이터 URL은 단순히 이미지의 바이너리를 나타내는 긴 문자열입니다. 그런 다음 HTML<img> 태그에서 이 URL을 사용할 수 있습니다.

매우 편리합니다.

비디오 튜토리얼

비디오 자습서를 선호하는 경우 내 YouTube 채널에서 이 4분 비디오를 볼 수 있습니다.

1단계. 파일 입력

HTML에 파일 입력 필드가 필요합니다. 다음과 같이:

<input type="file" id="fileInput" />

ID 이름은 원하는 대로 지정할 수 있습니다.

2단계. 이벤트 변경

JavaScript에서는 사용자가 파일을 선택할 때 반응하도록 change 리스너를 연결해야 합니다.

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

파일을 선택하고 콘솔을 확인하면 이벤트 개체를 알 수 있습니다. target.files 속성을 기록해 둡니다.

3단계. 파일 판독기 설정

다음으로 선택한 파일에 대한 참조를 가져와 FileReader 의 새 인스턴스를 만들어야 합니다. 이 파일 판독기 개체는 다른 형식의 파일을 읽을 수 있습니다.

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

console.log 줄을 위의 코드로 바꿉니다.

4단계. 데이터 URL로 읽기

이제 FileReader가 생성되었으므로 파일을 Base64 데이터 URL로 읽도록 지시할 수 있습니다.

reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

보시다시피 load 이벤트를 FileReader 에 연결합니다. 파일 읽기가 완료되면 reader.result에 액세스하여 데이터 URL을 가져올 수 있습니다.

전체 코드

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.addEventListener("load", () => {
        // Base64 Data URL 👇
        console.log(reader.result);
    });

    reader.readAsDataURL(file);
});

완료! <img> 태그에서 이 데이터 URL을 자유롭게 사용하십시오. 이미지를 너무 크게 만들지 마세요 😎

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1