web-dev-qa-db-ja.com

blob URLを通常のURLに変換します

私のページは次のようなURLを生成します："blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"どうすれば通常のアドレスに変換できますか？

<img>のsrc属性として使用しています。

javascripturlblob
76
Jacob

JavaScript Blobから作成されたURLは、「通常の」URLに変換できません。

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は、おそらく「通常の」という意味ではなく、問題があるほど大きくなる可能性があります。ただし、共有できるという点で通常のURLと同じように機能します。現在のブラウザまたはセッションに固有のものではありません。

135
Jeremy

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はブラウザーで十分にサポートされています。 （ie <9を除く、常にie <9）

15
Leooonard

ブロブURLビデオ/オーディオをダウンロードする方法を探してここに来た人のために、 この答えはうまくいきました 私にとっては。要するに、Chrome->Networkを介して、目的のWebページで* .m3u8ファイルを見つける必要があります。 tabおよびVLCプレーヤーに貼り付けます。

別のガイドが VLCプレーヤーでストリームを保存する の方法を示しています。

1
Gasper J.