자바스크립트의 블롭

Muhammad Muzammil Hussain 2024년2월15일

JavaScript JavaScript Blob

자바스크립트의 블롭
JavaScript에서 Blob의 장점
Blob에서 Base64로
블롭을 이미지로
Blob에서 어레이 버퍼로

이 기사에서는 Blob 개체에 대해 알아보고 JavaScript 소스 코드에서 어떻게 작동하는지 살펴봅니다. 예제를 사용하여 Blob이 JavaScript에서 파일 데이터를 보유하는 방법을 확인합니다.

자바스크립트의 블롭

JavaScript에서는 Blob을 사용하여 데이터를 파일에 저장된 개체로 보관합니다. 단순히 데이터를 바이트 그룹으로 보유하고 간단한 파일과 같은 자체 크기를 갖습니다.

Blob 크기 및 브라우저 기능에 따라 Blob 데이터는 메모리 및 파일 시스템에 저장됩니다. 우리는 Blob의 내용을 배열 버퍼로 쉽게 읽을 수 있습니다. 이 버퍼는 Blob이 데이터를 이진 형식으로 저장하는 데 더 적합하도록 만듭니다.

Blob의 내용을 표시하기 위해 <a>, <img> 또는 HTML의 기타 요소 태그에 대한 URL로 Blob을 쉽게 사용할 수 있습니다.

다음은 JavaScript에서 Blob 개체의 기본 구문입니다.

var myBlob = new Blob(['Content of Blob'], {type: 'text/plain'});

예제 코드:

Blob URL이 가리키는 createObjectURL() 개체를 사용하여 Blob을 얻을 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>
        JavaScript Blob
    </title>
</head>
<body>
     <script>
        let blobContent = new Blob(["DelftStack is a best website to learn programming!"],
                { type: 'text/plain' }); //blob file content and type
         link.href = URL.createObjectURL(blobContent);
    </script>

    <h1 style="color:blueviolet">DelftStack Learning</h1>
    <h3>JavaScript Create Blob Object and Download File</h3>

    <p>Click on link to to download the file</p>
    <a download="dummyFile.txt" href='#' id="link">Download File</a> //file name
</body>
</html>

출력:

JavaScript Blob 예

위의 HTML 소스에 표시된 것처럼 <script></script> 태그에 Blob 객체 blobContent를 생성했습니다. 파일의 콘텐츠 및 콘텐츠 유형을 정의했습니다.

createObjectURL()을 사용하여 blobContent를 URL로 획득하고 href와 연결합니다. #href='#' 및 id=link와 함께 앵커 태그를 사용하여 dummy.txt 파일을 다운로드했습니다.

위의 소스를 HTML 확장자로 저장하고 브라우저에서 연 다음 다운로드 파일 링크를 클릭하고 다운로드를 볼 수 있습니다. dummyFile.txt라는 텍스트 파일이 있습니다.

JavaScript에서 Blob의 장점

다음은 JavaScript에서 Blob 개체를 사용할 때의 몇 가지 이점입니다.

Blob을 쉽게 참조할 수 있습니다.
더 큰 이진 데이터 파일을 데이터베이스에 추가하려면 Blob이 큰 이진 데이터 파일을 추가하는 가장 좋은 옵션입니다.
Blob을 사용하면서 접근 권한을 쉽게 설정할 수 있습니다.
데이터베이스 백업에는 Blob을 사용하는 동안 모든 데이터가 포함됩니다.

Blob에서 Base64로

문자열 기반 데이터를 서버에 업로드하는 동안 JavaScript 파일 개체 또는 Blob을 Base64 문자열로 변환하는 것이 유용합니다. JavaScript를 사용하여 파일 개체에서 Base64 문자열과 DataURL을 변환할 수 있습니다.

Blob을 Base64로 인코딩된 문자열로 변환할 수 있으며 인코딩은 이진 데이터를 문자열로 나타냅니다. 그리고 data-urls에서 이 인코딩을 사용할 수 있습니다.

기본 구문:

const convertBlobToBase64 = async (blob) => {  // blob data
  const reader = new FileReader();
  let result = reader.readAsDataURL(blob);
}

블롭을 이미지로

JavaScript를 사용하여 이미지 또는 이미지 부분의 Blob을 만들 수 있습니다. 우리는 캔버스 요소를 사용하여 이미지 또는 그 부분을 생성하는 것과 같은 이미지 작업을 수행합니다.

기본 구문:

let myblob =
    await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

Blob에서 어레이 버퍼로

모든 버퍼 소스를 포함하여 Blob 생성자는 모든 것에서 Blob을 생성할 수 있습니다. blob.arrayBuffer()를 사용하여 Blob에서 가장 낮은 수준의 배열 버퍼를 생성할 수 있습니다.

기본 구문:

const mybufferPromise = await myblob.arrayBuffer();