Blob URL nedir ve neden kullanılır?

Blob URL'leri (ref W3C, resmi ad) veya Object-URL'ler (ref. MDN ve yöntem adı) bir Blob veya Dosya nesnesi ile kullanılır.

src="blob:https://crap.crap" src'sinde bulunan blob url'sini açtım video bir hata verdi ve açamıyorum ama src ile çalışıyordum etiketi nasıl mümkün olabilir?

Blob URL'leri yalnızca tarayıcı tarafından dahili olarak oluşturulabilir. URL.createObjectURL() Blob veya Dosya nesnesine özel bir referans oluşturur ve bu referans daha sonra URL.revokeObjectURL() kullanılarak serbest bırakılabilir. Bu URL'ler yalnızca tarayıcının tek bir örneğinde ve aynı oturumda (yani sayfanın/belgenin ömrü boyunca) yerel olarak kullanılabilir.

Blob url nedir?
Neden kullanılır?

Blob URL/Object URL, Blob ve Dosya nesnelerinin görüntüler, ikili veriler için indirme bağlantıları ve benzeri şeyler için URL kaynağı olarak kullanılmasına izin veren sözde bir protokoldür.

Örneğin, bir Image nesnesine ham bayt verisi veremezsiniz, çünkü bununla ne yapacağını bilemez. Örneğin resimlerin (ikili veri olan) URL'ler aracılığıyla yüklenmesini gerektirir. Bu, kaynak olarak bir URL gerektiren her şey için geçerlidir. İkili veriyi yüklemek ve ardından bir URL aracılığıyla geri sunmak yerine, veriye bir sunucu üzerinden gitmeden doğrudan erişebilmek için ekstra bir yerel 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, JavaScript'te her karakterin iki bayt almasıdır. Bunun üzerine Base-64 kodlaması nedeniyle %33'lük bir ekleme yapılır. Bloblar, Data-URI'nin yaptığı gibi önemli bir ek yüke sahip olmayan saf ikili bayt dizileridir, bu da onları daha hızlı ve daha küçük hale getirir.

Bir sunucuda kendi blob url'mi yapabilir miyim?

Hayır, Blob URL'leri/Obje URL'leri yalnızca tarayıcıda dahili olarak oluşturulabilir. BLOB sadece İkili Büyük Nesne anlamına gelir ve bayt dizileri olarak depolanır, ancak Dosya Okuyucu API aracılığıyla Blob oluşturabilir ve Dosya nesnesi alabilirsiniz. Bir istemci, verilerin ArrayBuffer ya da Blob olarak gönderilmesini talep edebilir. Sunucu verileri saf ikili veri olarak göndermelidir. Veritabanları genellikle ikili nesneleri tanımlamak için Blob kullanır ve özünde temel olarak bayt dizilerinden bahsediyoruz.

eğer varsa Ek ayrıntı

İkili verileri bir BLOB nesnesi olarak kapsüllemeniz ve ardından bunun için yerel bir URL oluşturmak üzere URL.createObjectURL() 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

URL`nin webkit tarayıcılarda ön ekli olabileceğini unutmayın, bu nedenle kullanın:

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

*Blob url nedir? Neden kullanılır?

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

Blob nesnesi, değişmez, ham verilerden oluşan dosya benzeri bir nesneyi temsil eder. Bloblar, JavaScript'e özgü bir formatta olması gerekmeyen verileri temsil eder. File arayüzü, Blob işlevselliğini miras alarak ve kullanıcının sistemindeki dosyaları destekleyecek şekilde genişleterek Blob'u temel alır.

*Bir sunucuda kendi blob url'mi oluşturabilir miyim?

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

Daha fazlasını okuyun

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

Bu Javascript işlevi, istemci tarayıcısında bir JSON dosyası indirmek için Blob Dosya API'si ile Data API'si arasındaki farkı göstermeyi amaçlamaktadır:

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

Fonksiyon saveAsFile('out.json', jsonString); şeklinde çağrılır. Tarayıcı tarafından hemen tanınan bir ByteStream oluşturacak ve oluşturulan dosyayı doğrudan File API URL.createObjectURL kullanarak indirecektir.

elsede,href` öğesi artı Data API aracılığıyla elde edilen aynı sonucu görmek mümkündür, ancak bunun Blob API'nin sahip olmadığı bazı sınırlamaları vardır.