Was ist eine Blob-URL und warum wird sie verwendet?

Blob-URLs (ref W3Cso die offizielle Bezeichnung) oder Objekt-URLs (ref. MDN und name der Methode) verwendet werden, mit einem Blob oder eine Datei Objekt.

src="blob:https://crap.crap" ich öffnete die blob-url, die war in src von
video es gab einen Fehler und ich kann Sie nicht öffnen, war aber die Arbeit mit dem src
tag, wie ist es möglich?

Blob-URLs kann nur intern erzeugt werden, die durch die browser. URL.createObjectURL() einen speziellen Verweis auf den Blob oder Datei-Objekt, das später freigegeben werden können, mit URL.revokeObjectURL(). Diese URLs können nur lokal verwendet werden, in der eine einzige Instanz des Browsers und in der gleichen Sitzung (dh. das Leben von der Seite/Dokument).

Was ist blob-url?

Warum wird es verwendet?

Blob-URL/Objekt-URL ist ein pseudo-Protokoll, Blob-und Datei-Objekte verwendet werden, die als URL-Quelle für Dinge wie Bilder, download-links für binäre Daten und so weiter.

Zum Beispiel können Sie nicht ein Bild in die hand-Objekt-roh-byte-Daten, wie Sie würden nicht wissen, was zu tun. Es erfordert zum Beispiel Bilder (binäre Daten) geladen werden, die über URLs. Dies gilt für alles, was erfordert eine URL als Quelle an. Anstelle von Upload, werden die binären Daten, servieren Sie es dann zurück, über eine URL, ist es besser, verwenden Sie eine zusätzliche lokale Schritt, um der Lage sein, auf die Daten direkt zugreifen, ohne den Umweg über einen server.

Es ist auch eine bessere alternative zu Data-URI strings codiert, wie Base-64. Das problem mit dem Data-URI ist, dass jeder char nimmt zwei bytes im JavaScript. Auf top von, dass 33% durch die Base-64-Codierung. Blobs sind Reine binäre byte-arrays, die keine signifikanten overhead als Daten-URI tut, das macht Sie schneller und kleiner zu handhaben.

Kann ich meine eigene blob-url auf einem server?

Nein, Blob-URLs - /Objekt-URLs können nur gemacht werden intern im browser. Sie können Blobs und get File-Objekt, über das File-Reader-API, obwohl BLOB bedeutet nur, Binary Large OBject gespeichert ist, als byte-arrays. Ein client kann die Anforderung die Daten gesendet werden, entweder als ArrayBuffer oder ein Blob. Sollte der server sendet die Daten als Reine Binärdaten. Datenbanken werden Häufig verwendet, Blob, um zu beschreiben, binäre Objekte, als auch, und im Grunde reden wir im Grunde über byte-arrays.

wenn Sie dann Zusätzliche Details

Müssen Sie Kapseln die binären Daten als BLOB-Objekt und verwenden Sie dann URL.createObjectURL() zum erzeugen einer lokalen 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

Beachten Sie, dass URL kann vorangestellt werden in webkit-Browsern, so verwenden:

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

InformationsquelleAutor der Antwort epistemex

Habe ich geändert funktionierende Lösung zu behandeln, sowohl in dem Fall.. wenn das video hochgeladen und als Bild hochgeladen .. hoffe es wird einigen helfen.

html

Dauer:

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('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/

InformationsquelleAutor der Antwort Pratap Dessai