Blob URL'sini normal URL'ye dönüştür

Sayfam şöyle bir URL oluşturuyor: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Bunu normal bir adrese nasıl dönüştürebilirim?

Bir olarak kullanıyorum <img>bireyin srcözniteliği.

JavaScript'ten oluşturulan bir URL, Blob"normal" bir URL'ye dönüştürülemez.

Bir blob:URL, sunucuda bulunan verilere atıfta bulunmaz, tarayıcınızın o anda mevcut sayfa için hafızasında bulunan verilere başvurur. Diğer sayfalarda kullanılamayacak, diğer tarayıcılarda kullanılamayacak ve diğer bilgisayarlardan kullanılamayacaktır.

Bu nedenle, genel olarak bir BlobURL'yi "normal" bir URL'ye dönüştürmek mantıklı değildir . Sıradan bir URL istiyorsanız, verileri tarayıcıdan bir sunucuya göndermeniz ve sunucunun bunu sıradan bir dosya gibi kullanıma sunmasını sağlamanız gerekir.

En azından Chrome'da blob:bir data:URL'yi bir URL'ye dönüştürmek mümkündür . Verileri blob:URL’den "almak" için bir AJAX isteği kullanabilirsiniz (HTTP isteğinde bulunmak yerine gerçekten tarayıcınızın belleğinden çekiyor olsa da).

İşte bir örnek:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();

data:URL'ler muhtemelen "normal" derken kastettiğiniz şey değildir ve sorunlu bir şekilde büyük olabilir. Ancak, paylaşılabildikleri için normal URL'ler gibi çalışırlar; mevcut tarayıcıya veya oturuma özel değillerdir.

blob url'sinden bir veri url'si oluşturmanın başka bir yolu da canvas kullanıyor olabilir.

var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)

mdn'de gördüğüm gibi canvas.toDataURL tarayıcılar tarafından iyi destekleniyor. (yani <9 hariç, her zaman yani <9)

Buraya bir blob url videosu / sesini indirmenin bir yolunu arayanlar için bu cevap benim için çalıştı . Kısacası, istenen web sayfasında Chrome -> Ağ sekmesinden bir * .m3u8 dosyası bulmanız ve bir VLC oynatıcısına yapıştırmanız gerekir .

Başka bir kılavuz, VLC Player ile bir akışı nasıl kaydedeceğinizi gösterir .

Bu cevabı burada buldum ve kabul edilen cevaptan çok daha net göründüğü için referans vermek istedim:

function blobToDataURL(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onload = function(e) {callback(e.target.result);}
  fileReader.readAsDataURL(blob);
}

Önceki yanıtın söylediği gibi, onu chrome devtools panelinden görmeye çalışsanız bile, url'ye geri çözmenin bir yolu yoktur, url hala blob olarak kodlanmış olabilir.

Bununla birlikte, verileri elde etmek mümkündür, verileri elde etmenin bir başka yolu da verileri bir çapaya koymak ve doğrudan indirmektir.

<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>

Bunu blob url içeren sayfaya ekleyin ve butona tıklayın, içeriği alırsınız.

Başka bir yol, ajax çağrısını bir proxy sunucusu aracılığıyla durdurmaktır, o zaman gerçek görüntü url'sini görüntüleyebilirsiniz.