BLOB URL이란 무엇이며 왜 사용됩니까?

BLOB URL에 많은 문제가 있습니다.

srcYouTube에서 비디오 태그를 검색 했는데 비디오 src가 다음과 같은 것을 발견했습니다 .

src="blob:https://crap.crap"

src오류가 발생한 비디오 의 BLOB URL을 열었습니다 . 링크를 열 수 없지만 src태그 로 작업하고있었습니다 . 이것이 어떻게 가능한지?

요구 사항 :

• Blob URL이란 무엇입니까?
• 왜 사용됩니까?
• 서버에서 자체 Blob URL을 만들 수 있습니까?
• 추가 정보가있는 경우

Blob URL ( W3C 참조 , 공식 이름) 또는 Object-URL ( MDN 및 메소드 이름 참조)은 Blob 또는 File 객체 와 함께 사용됩니다 .

src = "blob : https : //crap.crap "비디오의 src에있는 BLOB URL을 열면 오류가 발생하여 열 수는 없지만 src 태그를 사용하는 방법은 무엇입니까?

Blob URL은 브라우저에서 내부적으로 만 생성 할 수 있습니다. URL.createObjectURL()Blob 또는 File 객체에 대한 특수 참조를 생성하고 나중에이를 사용하여 해제 할 수 있습니다 URL.revokeObjectURL(). 이러한 URL은 브라우저의 단일 인스턴스 및 동일한 세션 (예 : 페이지 / 문서 수명)에서 로컬로만 사용할 수 있습니다.

얼룩 URL이란 무엇입니까?
왜 사용됩니까?

Blob URL / Object URL은 Blob 및 File 객체를 이미지, 바이너리 데이터의 다운로드 링크 등과 같은 URL 소스로 사용할 수있는 의사 프로토콜입니다.

예를 들어 Image 객체는 원시 바이트 데이터를 처리 할 수 ​​없습니다. 예를 들어 URL을 통해 이미지 (이진 데이터)를로드해야합니다. 소스로 URL이 필요한 모든 항목에 적용됩니다. 이진 데이터를 업로드 한 다음 URL을 통해 다시 제공하는 대신 서버를 통하지 않고 직접 데이터에 액세스 할 수 있도록 추가 로컬 단계를 사용하는 것이 좋습니다.

또한 Base-64 로 인코딩 된 문자열 인 Data-URI에 대한 더 나은 대안 입니다. Data-URI의 문제점은 각 문자가 JavaScript에서 2 바이트를 사용한다는 것입니다. 또한 Base-64 인코딩으로 인해 33 %가 추가되었습니다. Blob은 순수 이진 바이트 배열로, Data-URI와 달리 오버 헤드가 크지 않으므로 처리 속도가 빨라집니다.

서버에서 자체 Blob URL을 만들 수 있습니까?

아니요. Blob URL / 개체 URL은 브라우저에서 내부적으로 만 만들 수 있습니다. BLOB은 이진 큰 객체를 의미하고 바이트 배열로 저장되지만 파일 판독기 API를 통해 Blob을 만들고 파일 객체를 가져올 수 있습니다. 클라이언트는 데이터를 ArrayBuffer 또는 Blob으로 보내도록 요청할 수 있습니다. 서버는 데이터를 순수 이진 데이터로 보내야합니다. 데이터베이스는 종종 이진 객체를 기술하기 위해 Blob을 사용하며, 본질적으로 우리는 기본적으로 바이트 배열에 대해 이야기하고 있습니다.

그런 다음 추가 세부 정보가 있으면

이진 데이터를 BLOB 객체로 캡슐화 한 다음이를 사용 URL.createObjectURL()하여 로컬 URL을 생성해야합니다.

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob),
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes

주 URL사용하므로, 웹킷 브라우저에서 접두사 수 있습니다 :

var url = (URL || webkitURL).createObjectURL(...);

이 Javascript 함수 는 클라이언트 브라우저에서 JSON 파일 을 다운로드하기 위해 Blob File API와 Data API 의 차이점을 보여줍니다 .

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @author Loreto Parisi
 */

var saveAsFile = function(fileName, fileContents) {
    if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
        var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else { // Alternative 2: using Data
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
            encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
} // saveAsFile

/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));

이 함수는처럼 호출 saveAsFile('out.json', jsonString);됩니다. File API를 사용하여 생성 된 파일을 직접 다운로드하는 브라우저에서 즉시 인식하는 ByteStream을 작성합니다 URL.createObjectURL.

에서 else, 상기 통하여 얻은와 동일한 결과를 참조 할 수있다 href소자 플러스 데이터 API가 있지만, 이것은 블롭 API가되지 않았 음을 몇 가지 제한을 갖는다.

얼룩 URL이란 무엇입니까? 왜 사용됩니까?

BLOB는 단지 바이트 시퀀스입니다. 브라우저는이를 바이트 스트림으로 인식합니다. 소스에서 바이트 스트림을 가져 오는 데 사용됩니다.

Blob 객체는 파일과 같은 불변의 원시 데이터 객체를 나타냅니다. Blob은 반드시 JavaScript 기본 형식이 아닌 데이터를 나타냅니다. File 인터페이스는 Blob을 기반으로하며 Blob 기능을 상속하고 사용자 시스템에서 파일을 지원하도록 확장합니다.

서버에서 자체 Blob URL을 만들 수 있습니까?

예, http://php.net/manual/en/function.ibase-blob-echo.php 와 같은 서버 방법이 있습니다 .

더 읽어보기

• https://developer.mozilla.org/pl/docs/Web/API/Blob
• http://www.w3.org/TR/FileAPI/#dfn-Blob
• https://url.spec.whatwg.org/#urls

나는 비디오가 업로드 될 때와 이미지가 업로드 될 때 모두를 처리하기 위해 작업 솔루션을 수정했습니다 .. 그것이 도움이되기를 바랍니다.

HTML

<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>

자바 스크립트

var fileEl = document.querySelector("input");

fileEl.onchange = function(e) {


    var file = e.target.files[0]; // selected file

    if (!file) {
        console.log("nothing here");
        return;
    }

    console.log(file);
    console.log('file.size-' + file.size);
    console.log('file.type-' + file.type);
    console.log('file.acutalName-' + file.name);

    let start = performance.now();

    var mime = file.type, // store mime for later
        rd = new FileReader(); // create a FileReader

    if (/video/.test(mime)) {

        rd.onload = function(e) { // when file has read:


            var blob = new Blob([e.target.result], {
                    type: mime
                }), // create a blob of buffer
                url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
                video = document.createElement("video"); // create video element
            //console.log(blob);
            video.preload = "metadata"; // preload setting

            video.addEventListener("loadedmetadata", function() { // when enough data loads
                console.log('video.duration-' + video.duration);
                console.log('video.videoHeight-' + video.videoHeight);
                console.log('video.videoWidth-' + video.videoWidth);
                //document.querySelector("div")
                //  .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
                (URL || webkitURL).revokeObjectURL(url); // clean up

                console.log(start - performance.now());
                // ... continue from here ...

            });
            video.src = url; // start video load
        };
    } else if (/image/.test(mime)) {
        rd.onload = function(e) {

            var blob = new Blob([e.target.result], {
                    type: mime
                }),
                url = URL.createObjectURL(blob),
                img = new Image();

            img.onload = function() {
                console.log('iamge');
                console.dir('this.height-' + this.height);
                console.dir('this.width-' + this.width);
                URL.revokeObjectURL(this.src); // clean-up memory
                console.log(start - performance.now()); // add image to DOM
            }

            img.src = url;

        };
    }

    var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
    rd.readAsArrayBuffer(chunk); // read file object

};

jsFiddle URL

https://jsfiddle.net/PratapDessai/0sp3b159/