Chuyển đổi URL blob thành URL bình thường

Trang của tôi tạo ra một URL như thế này: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Làm cách nào để chuyển đổi nó thành một địa chỉ bình thường?

Tôi đang sử dụng nó như là một <img>'s srcthuộc tính.

BlobKhông thể chuyển đổi URL được tạo từ JavaScript thành URL "bình thường".

Một blob:URL không đề cập đến dữ liệu tồn tại trên máy chủ, nó đề cập đến dữ liệu mà trình duyệt của bạn hiện có trong bộ nhớ, cho trang hiện tại. Nó sẽ không có sẵn trên các trang khác, nó sẽ không khả dụng trong các trình duyệt khác và nó sẽ không khả dụng trên các máy tính khác.

Do đó, nói chung, không có ý nghĩa gì khi chuyển đổi một BlobURL thành một URL "bình thường". Nếu bạn muốn có một URL thông thường, bạn sẽ phải gửi dữ liệu từ trình duyệt đến một máy chủ và để máy chủ cung cấp nó như một tệp thông thường.

Có thể chuyển đổi một blob:URL thành một data:URL, ít nhất là trong Chrome. Bạn có thể sử dụng một yêu cầu AJAX để "tìm nạp" dữ liệu từ blob:URL (mặc dù nó thực sự chỉ kéo nó ra khỏi bộ nhớ của trình duyệt của bạn, không thực hiện một yêu cầu HTTP).

Đây là một ví dụ:

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 có thể không giống như ý bạn muốn nói là "bình thường" và có thể lớn có vấn đề. Tuy nhiên, chúng hoạt động giống như các URL bình thường ở chỗ chúng có thể được chia sẻ; chúng không dành riêng cho trình duyệt hoặc phiên hiện tại.

một cách khác để tạo url dữ liệu từ url blob có thể là sử dụng canvas.

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)

như những gì tôi thấy trong mdn, canvas.toDataURL được trình duyệt hỗ trợ tốt. (ngoại trừ tức là <9, luôn luôn tức là <9)

Đối với những người đến đây để tìm cách tải xuống video / âm thanh url blog, câu trả lời này phù hợp với tôi. Tóm lại, bạn cần tìm tệp * .m3u8 trên trang web mong muốn thông qua tab Chrome -> Mạng và dán nó vào trình phát VLC .

Một hướng dẫn khác chỉ cho bạn cách lưu luồng bằng VLC Player .

Như câu trả lời trước đã nói, không có cách nào để giải mã nó trở lại url, ngay cả khi bạn cố gắng xem nó từ bảng chrome devtools, url có thể vẫn được mã hóa dưới dạng blob.

Tuy nhiên, có thể lấy dữ liệu, một cách khác để lấy dữ liệu là đặt nó vào một mỏ neo và trực tiếp tải xuống.

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

Chèn cái này vào trang chứa url blob và nhấp vào nút, bạn sẽ có được nội dung.

Một cách khác là chặn cuộc gọi ajax thông qua máy chủ proxy, sau đó bạn có thể xem url hình ảnh thực.