Ubah URL blob menjadi URL normal

Halaman saya menghasilkan URL seperti ini: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Bagaimana cara mengubahnya menjadi alamat biasa?

Saya menggunakan itu sebagai <img>'s srcatribut.

URL yang dibuat dari JavaScript Blobtidak dapat diubah menjadi URL "normal".

Sebuah blob:URL tidak mengacu pada data yang ada di server, mengacu pada data yang browser Anda saat ini memiliki di memori, untuk halaman saat ini. Ini tidak akan tersedia di halaman lain, tidak akan tersedia di browser lain, dan tidak akan tersedia dari komputer lain.

Oleh karena itu tidak masuk akal, secara umum, untuk mengubah BlobURL menjadi URL "normal". Jika Anda menginginkan URL biasa, Anda harus mengirim data dari browser ke server dan meminta server membuatnya tersedia seperti file biasa.

Dimungkinkan untuk mengubah blob:URL menjadi data:URL, setidaknya di Chrome. Anda dapat menggunakan permintaan AJAX untuk "mengambil" data dari blob:URL (meskipun sebenarnya hanya menariknya dari memori browser Anda, bukan membuat permintaan HTTP).

Berikut contohnya:

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 mungkin bukan yang Anda maksud dengan "normal" dan bisa sangat besar. Namun mereka bekerja seperti URL biasa karena mereka dapat dibagi; mereka tidak spesifik untuk browser atau sesi saat ini.

Cara lain untuk membuat url data dari url blob mungkin menggunakan kanvas.

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)

seperti yang saya lihat di mdn, canvas.toDataURL didukung dengan baik oleh browser. (kecuali yaitu <9, selalu yaitu <9)

Bagi mereka yang datang ke sini mencari cara untuk mendownload video / audio blob url, jawaban ini berhasil untuk saya. Singkatnya, Anda perlu mencari file * .m3u8 di halaman web yang diinginkan melalui Chrome -> tab Jaringan dan menempelkannya ke pemutar VLC .

Panduan lain menunjukkan kepada Anda cara menyimpan streaming dengan VLC Player .

Seperti jawaban sebelumnya, tidak ada cara untuk mendekodekannya kembali ke url, bahkan saat Anda mencoba melihatnya dari panel chrome devtools, url tersebut mungkin masih dienkode sebagai blob.

Namun, data dapat diperoleh, cara lain untuk mendapatkan data tersebut adalah dengan memasukkannya ke dalam jangkar dan langsung mengunduhnya.

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

Masukkan ini ke halaman yang berisi url blob dan klik tombolnya, Anda mendapatkan kontennya.

Cara lain adalah dengan mencegat panggilan ajax melalui server proxy, lalu Anda dapat melihat url gambar yang sebenarnya.