将blob URL转换为普通URL

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

我使用它作为<img>的src属性。

2013-02-19 Jacob

甚至在解码URL之后，它仍然是一个“localhost”链接。找出它的公共链接。（您使用的是CDN？） – Raptor 2013-02-19 07:33:39

我希望使用javascript。 – Jacob 2013-02-19 07:38:35

使用[stackvoverflow链接]（http://stackoverflow.com/questions/332872/how-to-encode-a-url-in-javascript）..和[W3C]（http://www.w3schools.com /jsref/tryit.asp?filename=tryjsref_decodeuricomponent）你真正的问题将是如何使它独立于你部署代码的环境 – user1428716 2013-02-19 07:42:39

107

从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一样工作，因为他们可以共享;它们并不特定于当前的浏览器或会话。

来源

2013-04-23 21:57:31

如果blob网址没有指向服务器数据，那么Youtube视频的src网址如何显示： src =“blob：https％3A // www.youtube.com/44f26667-03f1-4978-9eed-af0cbf11dd67“ （在Chrome中） – bhh1988 2014-09-03 15:53:12

@ bhh1988这是一个非常有趣的发现。我不确定那里发生了什么。如果我尝试使用XMLHttpRequest检索其src Blob URL，如本文中所述，则不会返回任何内容。我的猜测是（a）他们生成任何空的Blob URL作为占位符，同时从另一个源提供数据，或者（b）Blob以某种方式充当加密数据的代理（通过HTML5加密媒体扩展）。但是，我不确定这些在实际中如何实际上可以做到。 – 2014-09-03 16:11:56

+11

@ bhh1988它看起来像[媒体源扩展规范]（https：//dvcs.w3。org/hg/html-media/raw-file/tip/media-source/media-source.html）允许为由JavaScript管理的媒体流创建blob URL。这些对象不像本文讨论的blob URL那样的静态数据，因此在行为上有所不同，但它们仍然是指本地信息，而不是直接指向服务器上的数据。 – 2014-09-11 01:33:13

另一种从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）

来源

2015-07-23 07:44:16 Leooonard

请注意，这当然只适用于图像数据，一些元数据可能会丢失！ – minmaxavg 2016-05-25 09:32:02

这样做会创建一个链接，但如果你遵循它，你只会得到一个黑盒子。 – Antfish 2017-01-30 10:15:15

@Antfish，这不应该发生不是吗？ – Pacerier 2017-02-06 21:49:02

将blob URL转换为普通URL

回答

相关问题