web-dev-qa-db-ja.com

BLOB URLとは何ですか。なぜ使用されるのですか。

BLOB URLに非常に問題があります。

YouTubeで動画タグのsrcを検索していましたが、動画のsrcは次のようになっていました。

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

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

必要条件

  • BLOB URLとは
  • なぜそれが使われるのですか？
  • 自分のBLOB URLをサーバー上に作成できますか？
  • 追加情報がある場合
html5-videobloburls
228
Waqas Tahir

ブロブURL（参照 W3C 、正式名）またはオブジェクトURL（参照 _ 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 /オブジェクトURLは、BLOBおよびファイルオブジェクトを画像、バイナリデータのダウンロードリンクなどのURLソースとして使用できるようにするための疑似プロトコルです。

例えば、Imageオブジェクトの生のbyte-dataは、何をしたらよいのかわからないので、渡すことはできません。たとえば、画像（バイナリデータ）をURL経由で読み込む必要があります。これは、URLをソースとして必要とするものすべてに適用されます。バイナリデータをアップロードするのではなく、URL経由で返送するのではなく、サーバーを経由せずに直接データにアクセスできるようにするには、追加のローカル手順を使用することをお勧めします。

また、 Base-64 としてエンコードされた文字列であるData-URIに代わるより良い方法です。 Data-URIの問題点は、JavaScriptでは各charが2バイトかかることです。それに加えて、Base-64エンコーディングのために33％が追加されています。 BLOBは純粋なバイナリのバイト配列であり、Data-URIのように大きなオーバーヘッドはありません。これにより、BLOBは処理が高速かつ小型になります。

自分のBLOB URLをサーバー上で作成できますか？

いいえ、BLOB URL /オブジェクト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

URLはwebkit-browserの前に付けることができるので注意してください：

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

この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);のように呼ばれます。ブラウザによってすぐに認識されるByteStreamが作成され、File API URL.createObjectURLを使用して生成されたファイルが直接ダウンロードされます。

elseでは、href要素にData APIを追加した場合と同じ結果が得られますが、Blob APIにはないいくつかの制限があります。

3
loretoparisi

BLOB URLとは何ですか？なぜそれが使われるのですか？

BLOBは単なるバイトシーケンスです。ブラウザはそれをバイトストリームとして認識します。ソースからバイトストリームを取得するために使用されます。

Blobオブジェクトは、不変の生データのファイルのようなオブジェクトを表します。ブロブは、必ずしもJavaScript固有の形式ではないデータを表します。 FileインターフェースはBlobに基づいており、Blob機能を継承し、それを拡張してユーザーのシステム上のファイルをサポートします。

私は自分のBLOB URLをサーバー上で作ることができますか？

はい、そうすることができますいくつかの方法があります例えば http://php.net/manual/en/function.ibase-blob-echo.php

続きを読む

3
Robert

私は、ビデオがアップロードされたときと画像がアップロードされたときの両方のケースを処理するために、ワーキングソリューションを修正しました。

hTML期間：

ジャバスクリプト

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('image');
                            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/ /

1
Pratap Dessai