blob URLとは何ですか、なぜ使用されているのですか？

blob URLで多くの問題が発生しています。

srcYouTubeで動画タグを検索していたところ、次のsrcような動画であることがわかりました。

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

srcエラーが発生した動画のBLOB URLを開きました。リンクを開くことができませんが、srcタグで機能していました。これはどのようにして可能ですか？

要件：

• blob URLとは何ですか？
• なぜそれが使われるのですか？
• サーバーで独自のblob URLを作成できますか？
• 追加の詳細情報がある場合

Blob URL（ref W3C、公式名）またはObject-URLs（ref。MDNおよびメソッド名）は、BlobまたはFileオブジェクトで使用されます。

src = "blob：https：//crap.crap "ビデオのsrcにあるblobのURLを開いたところ、エラーが発生し、開くことができませんでしたが、srcタグを操作していたのですが、どうすればよいですか。

Blob URLは、ブラウザーによって内部的にのみ生成できます。URL.createObjectURL()を使用して後で解放できるBlobまたはFileオブジェクトへの特別な参照を作成しURL.revokeObjectURL()ます。これらのURLは、ブラウザの単一インスタンスと同じセッション（つまり、ページ/ドキュメントの存続期間）でのみローカルで使用できます。

blob 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 / Object URLはブラウザーの内部でのみ作成できます。BLOBはバイナリラージオブジェクトを意味し、バイト配列として保存されますが、ファイルリーダーAPIを介してBlobを作成してFileオブジェクトを取得できます。クライアントは、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

URLwebkit-browsersでは接頭辞が付いている場合があるので、次のように使用してください。

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

このJavaScript関数は、Blob File APIとData API の違いを示して、クライアントブラウザーでJSONファイルをダウンロードすることを目的としています。

/**
 * 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。

では、要素とData API elseを介して取得した同じ結果を表示できhrefますが、これにはBlob APIにはないいくつかの制限があります。

blob 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>

Javascript

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/