Che cos'è un URL BLOB e perché viene utilizzato?

Sto riscontrando molti problemi con l'URL BLOB.

Stavo cercando srcun tag video su YouTube e ho scoperto che il video srcera simile a:

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

Ho aperto l'URL BLOB presente nel srcvideo che ha generato un errore. Non riesco ad aprire il collegamento, ma funzionava con il srctag. Com'è possibile?

Requisiti:

• Che cos'è l'URL BLOB?
• Perché è usato?
• Posso creare il mio URL BLOB su un server?
• Se hai ulteriori dettagli

Gli URL BLOB (riferimento W3C , nome ufficiale) o gli URL oggetto (riferimento MDN e nome metodo) vengono utilizzati con un oggetto BLOB o File .

src = "blob: https: //crap.crap " Ho aperto l'URL BLOB che era in SRC del video ha dato un errore e non riesco ad aprire ma stava lavorando con il tag SRC come è possibile?

Gli URL BLOB possono essere generati solo internamente dal browser. URL.createObjectURL()creerà un riferimento speciale all'oggetto BLOB o File che in seguito può essere rilasciato usando URL.revokeObjectURL(). Questi URL possono essere utilizzati solo localmente nella singola istanza del browser e nella stessa sessione (ovvero la durata della pagina / del documento).

Che cos'è l'URL BLOB?
Perché è usato?

URL BLOB / URL oggetto è uno pseudo protocollo che consente di utilizzare oggetti BLOB e file come origine URL per cose come immagini, collegamenti per il download di dati binari e così via.

Ad esempio, non è possibile consegnare un oggetto immagine dati byte grezzi in quanto non saprebbe cosa farsene. Ad esempio, richiede che le immagini (che sono dati binari) vengano caricate tramite URL. Questo vale per tutto ciò che richiede un URL come sorgente. Invece di caricare i dati binari, quindi servirli nuovamente tramite un URL, è meglio utilizzare un passaggio locale aggiuntivo per poter accedere ai dati direttamente senza passare attraverso un server.

È anche un'alternativa migliore a URI dati che sono stringhe codificate come Base-64 . Il problema con URI dati è che ogni carattere richiede due byte in JavaScript. Inoltre, viene aggiunto un 33% grazie alla codifica Base-64. I BLOB sono array di byte binari puri che non presentano alcun sovraccarico significativo come l'URI dei dati, il che li rende più veloci e più piccoli da gestire.

Posso creare il mio URL BLOB su un server?

No, gli URL BLOB / URL oggetto possono essere creati solo internamente nel browser. È possibile creare BLOB e ottenere l'oggetto File tramite l'API Lettore file, sebbene BLOB significhi solo OBject binario di grandi dimensioni e sia archiviato come array di byte. Un client può richiedere che i dati vengano inviati come ArrayBuffer o come BLOB. Il server dovrebbe inviare i dati come dati binari puri. Spesso i database usano Blob per descrivere anche oggetti binari, e in sostanza stiamo parlando sostanzialmente di array di byte.

se hai ulteriori dettagli

È necessario incapsulare i dati binari come oggetto BLOB, quindi utilizzare URL.createObjectURL()per generare un URL locale per esso:

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

Si noti che URLpuò essere aggiunto un prefisso nei browser webkit, quindi utilizzare:

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

Questa pretesa funzione JavaScript per mostrare la differenza tra il Blob API file e il dati API per scaricare un JSON file nel browser client:

/**
 * 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));

La funzione si chiama come saveAsFile('out.json', jsonString);. Creerà un ByteStream immediatamente riconosciuto dal browser che scaricherà il file generato direttamente utilizzando l'API File URL.createObjectURL.

In else, è possibile vedere lo stesso risultato ottenuto tramite l' hrefelemento più l'API di dati, ma questo ha diverse limitazioni che l'API Blob non ha.

Cos'è l'URL BLOB? Perché è usato?

BLOB è solo una sequenza di byte. Il browser lo riconosce come flusso di byte. Viene utilizzato per ottenere il flusso di byte dall'origine.

Un oggetto BLOB rappresenta un oggetto simile a un file di dati grezzi immutabili. I BLOB rappresentano dati che non sono necessariamente in un formato nativo JavaScript. L'interfaccia File si basa su BLOB, ereditando la funzionalità BLOB ed espandendola per supportare i file sul sistema dell'utente.

Posso creare il mio URL BLOB su un server?

Sì, ci sono modi serverali per farlo, ad esempio provare http://php.net/manual/en/function.ibase-blob-echo.php

Maggiori informazioni su

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

Ho modificato la soluzione di lavoro per gestire sia il caso .. quando il video viene caricato sia quando l'immagine viene caricata .. spero che possa esserne d'aiuto.

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/