将 Blob URL 转换为普通 URL

javascript url blob

2022-08-30 04:43:20

我的页面生成如下 URL：如何将其转换为普通地址？"blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"

我将其用作的属性。<img>src

答案 1

从 JavaScript 创建的 URL 不能转换为“普通”URL。Blob

URL不是指服务器上存在的数据，它指的是浏览器当前内存中当前具有的当前页面的数据。它将在其他页面上不可用，在其他浏览器中不可用，并且无法从其他计算机上获得。blob:

因此，一般来说，将URL转换为“普通”URL是没有意义的。如果你想要一个普通的URL，你必须将数据从浏览器发送到服务器，并让服务器像普通文件一样使用它。Blob

至少在Chrome中，可以将网址转换为网址。您可以使用AJAX请求从URL中“获取”数据（即使它实际上只是将其从浏览器的内存中提取出来，而不是发出HTTP请求）。blob:data:blob:

下面是一个示例：

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可能不是您所说的“正常”，并且可能很大。但是，它们确实像普通URL一样工作，因为它们可以共享;它们不特定于当前浏览器或会话。

答案 2

从 blob url 创建数据 url 的另一种方法可能是使用 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)

正如我在mdn中看到的那样，canvas.toDataURL得到了浏览器的良好支持。（除了ie<9，总是ie<9）