Ubah URL blob menjadi URL normal

96

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.

Yakub
sumber
1
bahkan setelah mendekode URL, itu masih berupa localhosttautan. Cari tahu tautan publiknya. (CDN mana yang Anda gunakan?)
Raptor
Saya ingin menggunakan javascript.
Jacob
Gunakan link stackvoverflow .. dan W3C Masalah sebenarnya Anda adalah bagaimana membuatnya terlepas dari lingkungan tempat Anda menyebarkan kode
user1428716
Apakah ada cara untuk menemukan URL publik dari alamat blob. Ini adalah satu-satunya nilai yang saya miliki.
Jacob

Jawaban:

167

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.

Jeremy
sumber
14
Jika url blob tidak mengarah ke data server, mengapa url src video Youtube terlihat seperti: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (di Chrome)
bhh1988
5
@ Bhh1988 Itu penemuan yang sangat menarik. Saya tidak yakin apa yang terjadi di sana. Jika saya mencoba mengambil URL gumpalan src mereka menggunakan XMLHttpRequest, seperti yang dijelaskan dalam posting ini, tidak ada konten yang dikembalikan. Dugaan saya adalah bahwa (a) mereka membuat URL Blob kosong untuk digunakan sebagai placeholder sambil memasukkan data dari sumber lain atau (b) Blob entah bagaimana bertindak sebagai proxy untuk data terenkripsi (melalui Ekstensi Media Terenkripsi HTML5). Namun, saya tidak yakin bagaimana sebenarnya salah satu dari ini dapat dilakukan dalam praktik.
Jeremy
19
@ bhh1988 Sepertinya spesifikasi ekstensi sumber media memungkinkan dibuatnya URL blob untuk aliran media yang dikelola oleh JavaScript. Ini tidak sesuai dengan data statis seperti URL blob yang dibahas dalam posting ini, oleh karena itu perbedaan dalam perilakunya, tetapi mereka masih mengacu pada informasi lokal, tidak langsung ke data di server.
Jeremy
1
Hmm, kedengarannya benar. Ini membingungkan karena url terlihat nyata dan bermakna, tetapi jika itu hanya placeholder, tidak masalah berapa nilai srcnya.
bhh1988
3
Saya mendapatkan Not allowed to navigate top frame to data URL: data:text/plain;base64,...kesalahan. Saya mendapatkan datanya, tetapi window.locationtidak diizinkan ...
loretoparisi
15

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)

Leooonard
sumber
17
Perhatikan bahwa ini tentu saja hanya berlaku untuk data gambar, dan beberapa metadata mungkin hilang!
minmaxavg
1
Melakukan ini membuat tautan tetapi jika Anda mengikutinya Anda hanya mendapatkan kotak hitam.
Antfish
@Antfish, Itu seharusnya tidak terjadi bukan?
Pacerier
5

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 .

Gasper J.
sumber
-4

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.

ospider
sumber
<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> unduh </a>. Ini harus berhasil. Ketika akan mengenai href, itu akan mengganti nama blob menjadi abc.txt & download
P Satish Patro
2
Mengapa suara negatif? apakah kamu benar-benar mencoba apa yang aku katakan?
ospider
Saya belum memberikan suara negatif. Saya datang ke sini. Dan, saya pikir itu akan berhasil. Saya mendukung ini a littlebit
P Satish Patro
Tidak yakin dengan suara negatifnya, tetapi ini terdengar jelas cara yang mudah. (Karena itu, saya selalu mendapatkan Failed - Network errorChrome 83.0.4103.97 di Linux.)
toraritte