將blob URL轉換爲普通URL

Question

我的頁面生成如下URL："blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"如何將其轉換爲普通地址？

我使用它作爲<img>的src屬性。

Answer 1

從JavaScript Blob創建的URL無法轉換爲「正常」URL。

A blob: URL並不是指服務器上存在的數據，而是指您的瀏覽器當前在內存中爲當前頁面提供的數據。它在其他頁面上不可用，在其他瀏覽器中不可用，並且不能從其他計算機上使用。

因此，通常將Blob URL轉換爲「普通」URL是沒有意義的。如果你想要一個普通的URL，你將不得不將數據從瀏覽器發送到服務器，並讓服務器像普通文件一樣使用它。

至少在Chrome中，可以將blob: URL轉換爲data: URL。您可以使用AJAX請求從blob: URL中「獲取」數據（即使它真的只是將其從瀏覽器的內存中取出，而不是發出HTTP請求）。

下面是一個例子：

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一樣工作，因爲他們可以共享;它們並不特定於當前的瀏覽器或會話。

Answer 2

另一種從blob url創建數據url的方式可能是使用畫布。

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中所看到的，canvas.toDataURL得到了瀏覽器的支持。 （除了<9，總是<9）