Blob URL'si nedir ve neden kullanılır?

Blob URL ile ilgili birçok sorun yaşıyorum.

srcYouTube'da bir video etiketi arıyordum ve videonun şöyle olduğunu buldum src:

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

srcVideodaki blob URL'sini açtım, bir hata verdi. Bağlantıyı açamıyorum, ancak srcetiketle çalışıyordu . Bu nasıl mümkün olabilir?

Gereksinimler:

• Blob URL'si nedir?
• Neden kullanılır?
• Bir sunucuda kendi blob URL'mi yapabilir miyim?
• Başka ayrıntılarınız varsa

Blob URL'leri (ref W3C , resmi ad) veya Object-URLs (ref. MDN ve yöntem adı) bir Blob veya File nesnesiyle kullanılır.

src = "blob: https: //crap.crap " Ben bir video verdi src video blob url açtım ve açamıyorum ama nasıl mümkün olduğunu src etiketi ile çalışıyordu?

Blob URL'leri yalnızca tarayıcı tarafından dahili olarak oluşturulabilir. URL.createObjectURL()daha sonra yayınlanabilecek olan Blob veya File nesnesine özel bir başvuru oluşturur URL.revokeObjectURL(). Bu URL'ler yalnızca tarayıcının tek bir örneğinde ve aynı oturumda (ör. Sayfanın / belgenin ömrü) yerel olarak kullanılabilir.

Blob url nedir?
Neden kullanılır?

Blob URL / Nesne URL'si, Blob ve File nesnelerinin resimler, ikili veriler için indirme bağlantıları vb. İçin URL kaynağı olarak kullanılmasına izin veren sahte bir protokoldür.

Örneğin, bir Image nesnesi ham bayt-verisini, onunla ne yapacağını bilemeyeceği için işleyemezsiniz. Örneğin, resimlerin (ikili veri olan) URL'ler aracılığıyla yüklenmesini gerektirir. Bu, kaynak olarak URL gerektiren her şey için geçerlidir. İkili verileri yüklemek yerine, bir URL aracılığıyla geri sunmak yerine, sunucuya gitmeden doğrudan verilere erişmek için ekstra yerel bir adım kullanmak daha iyidir.

Ayrıca Base-64 olarak kodlanmış dizeler olan Data-URI'ye daha iyi bir alternatiftir . Data-URI ile ilgili sorun, her karakter JavaScript'te iki bayt almasıdır. Bunun üzerine Base-64 kodlaması nedeniyle% 33 eklenir. Bloblar, Data-URI'nin yaptığı gibi önemli bir ek yükü olmayan saf ikili bayt dizileridir, bu da onları işlemek için daha hızlı ve daha küçük hale getirir.

Bir sunucuda kendi blob url'mi yapabilir miyim?

Hayır, Blob URL'leri / Nesne URL'leri yalnızca tarayıcıda dahili olarak oluşturulabilir. BLOB sadece İkili Büyük OBject anlamına gelir ve bayt dizileri olarak saklansa da Blob'ları yapabilir ve File Reader API'sı ile File nesnesini alabilirsiniz. İstemci, verilerin ArrayBuffer veya bir Blob olarak gönderilmesini isteyebilir. Sunucu verileri saf ikili veri olarak göndermelidir. Veritabanları genellikle ikili nesneleri tanımlamak için Blob'u kullanır ve özünde temel olarak bayt dizilerinden bahsediyoruz.

Ek detayınız varsa

İkili verileri bir BLOB nesnesi olarak kapsüllemeniz, ardından URL.createObjectURL()bunun için yerel bir URL oluşturmak için kullanmanız gerekir:

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 tarayıcılarında ön ek olabileceğini unutmayın , bu nedenle şunu kullanın:

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

Bu Javascript işlevi , istemci tarayıcısına bir JSON dosyası indirmek için Blob Dosya API'sı ve Veri API'sı arasındaki farkı gösterir.

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

Bu işleve benzer denir saveAsFile('out.json', jsonString);. Oluşturulan dosyayı doğrudan Dosya API'sını kullanarak indirecek tarayıcı tarafından hemen tanınan bir ByteStream oluşturur URL.createObjectURL.

'De, öğe artı Veri API'sı elseyoluyla elde edilen aynı sonucu görmek mümkündür href, ancak Blob API'sının sahip olmadığı birkaç sınırlama vardır.

Blob url nedir? Neden kullanılır?

BLOB sadece bayt dizisidir. Tarayıcı bunu bayt akışı olarak tanır. Kaynaktan bayt akışı elde etmek için kullanılır.

Bir Blob nesnesi, değiştirilemez, ham verilerin dosya benzeri bir nesnesini temsil eder. Bloblar, mutlaka JavaScript yerel biçiminde olmayan verileri temsil eder. Dosya arayüzü Blob'u temel alır, blob işlevselliğini devralır ve kullanıcının sistemindeki dosyaları destekleyecek şekilde genişletir.

Bir sunucuda kendi blob url'mi yapabilir miyim?

Evet, bunu yapmanın çeşitli yolları olabilir, örneğin http://php.net/manual/en/function.ibase-blob-echo.php adresini deneyin.

Hakkında daha fazla bilgi

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

Ben her iki durumda da işlemek için çalışma çözümü değiştirdim .. video yüklendiğinde ve görüntü yüklendiğinde .. umarım bazı yardımcı olacaktır.

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/