Recent Posts
Recent Comments
Link
Tags more
11-17 02:31
Today
Total
관리 메뉴

삶 가운데 남긴 기록 AACII.TISTORY.COM

javascript BLOB 본문

DEV&OPS/Javascript

javascript BLOB

ALEPH.GEM 2022. 3. 18. 10:05

BLOB(Binary Large Object)

Blob 생성자

var blob = new Blob(source, {type: contentType});

여기서 source는 버퍼 배열이고 contentType은 MIME 타입입니다.

String 타입은 UTF-8 바이너리로 변환됩니다.

 

//문자열 Blob
var blob = new Blob(["JavaScript"], {type: "text/plain"});
console.log(blob.size, blob.type); 		//10 "text/plain"
//형식화 배열 blob
var a = new UintBArray([0,1,2,3]);
var blob = new Blob(a, {type: "application/octet-stream"});
console.log(blob.size, blob.type);		//4 "applicaton/octet-stream"

 

Blob 객체를 XMLHttpRequest 으로 받는 방법

function getBlob(url, callback){
    var req = new XMLHttpRequest();
    req.onload = function(){
        callback(req.response);
    };
    req.open("GET", url);
    req.responseType = "blob";
    req.send(null);
}

 

File Object

File 객체의 프로퍼티
  • lastModified : 마지막 수정 날짜(밀리초)
  • lastModifiedDate : 마지막 수정 날짜(Date객체)
  • name : 파일 이름

 

input 엘리먼트로 파일을 읽어오는 방법
<input type="file" multiple>

multiple attribute를 지정하면 shift키로 여러개의 파일을 선택할 수 있습니다.

<input type="file" accept="image/*">

accept attribute로 MIME 타입을 설정 할 수 있습니다.

element.ondrop = function(e){
    var files = e.dataTransfer.files;
    ...
}

드래그 앤 드롭 으로도 파일을 불러올 수 있습니다.

 

 

FileReader Object

FileReader의 메서드
  • readAsText(blob [, encoding]) : 텍스트 형식으로 읽기
  • readAsArrayBuffer(blob) : ArrayBuffer 형식으로 읽기
  • readAsDataURL(blob) : url이 가리키는 데이터 읽기
  • readAsBinaryString(blob) : 이진 데이터 형식으로 읽기

이러한 메서드들은 비동기로 처리합니다.

그래서 FileReader객체의 load 이벤트 처리기 안에 파일을 다 읽어온 후 처리하는 코드를 작성합니다.

읽어들인 데이터는 FileReader객체의 result 프로퍼티에 저장됩니다.

 

 

 Blob URL

var blobURL = URL.createObjectURL(blob);

위 메서드를 이용하면 Blob를 가리키는 URL을 가질 수 있습니다.

"blob : "으로 시작하는 문자열이 Blob URL로 설정되고 이것을 가져옵니다.

var a = new UintBArray([1,2,3]);
var blob = new Blob([a], {type: "application/octet-binary"});
var blobURL = URL.createObjectURL(blob);
console.log(blobURL);

URL.revokeURL(blobURL);을 사용하면 메모리에서 해제할 수 있습니다.

 

텍스트 파일의 내용을 읽는 예제
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 텍스트 파일 읽기 </title>
</head>
<body>
    <script>
        function readTextFile(f, callback){
            var reader = new FileReader();
            reader.onload = function(){
                callback(reader.result);    //읽은 텍스트를 callback에 전달 
            };
            reader.onerror = function(e){
                console.log("Error", e);
            };
            reader.readAsText(f);   //파일 데이터를 읽음
        }
        window.onload = function(){
            var input = document.getElementById("input");
            var output = document.getElementById("output");
            input.onchange = function(e){
                var files = e.target.files; //File객체의 배열
                console.log(files[0].type);
                //텍스트 파일인지 확인
                if(files[0].type.substring(0,5) !== "text/") return;
                //pre element에 기록
                readTextFile(files[0], function(text){
                    output.innerHTML = text;
                });
            };
        };
    </script>
    <input type="file" id="input">
    <pre id="output"></pre>
</body>
</html>

 

Blob URL을 이미지로 표시
var blobURL = URL.createObjectURL(blob);
var img = document.createElement("img");
img.src = blobURL;

 

Blob URL을 canvas에 그리기
var blobURL = URL.createObjectURL(blob);
var img = document.createElement("img");
img.onload = function(){
    ctx.drawImage(img, 0, 0);
    URL.revokeObjectURL(this.src);
};
img.src = blobURL;

 

XMLHttpRequest 데이터 텍스트로 읽기
var blobURL = URL.createObjectURL(blob);
var req = new XMLHttpRequest();
req.onload = function(){
    callback(req.responseText);
};
req.open("GET", blobURL);
req.send(null);

 

 

 

 

 

 

 

 

728x90
저작자표시

'DEV&OPS > Javascript' 카테고리의 다른 글

jquery ajax post 예제  (0) 2022.04.19
javascript Web Workers  (0) 2022.03.21
javascript 드래그 앤 드롭  (0) 2022.03.17
javascript class  (0) 2022.03.15
Ajax  (0) 2022.03.12
'DEV&OPS/Javascript' Related Articles more