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

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

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

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

A blob:お使いのブラウザは、現在メモリに持っているURLがサーバー上に存在するデータを参照していない、それが現在のページに、データを参照します。他のページでは利用できず、他のブラウザでは利用できず、他のコンピュータからも利用できません。

したがって、BlobURLを「通常の」URL に変換することは、一般的に意味がありません。通常のURLが必要な場合は、ブラウザからサーバーにデータを送信し、サーバーで通常のファイルのように使用できるようにする必要があります。

少なくともChromeでは、blob:URLをURLに変換することが可能data:です。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と同様に機能します。現在のブラウザやセッションに固有のものではありません。

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）

blob urlビデオ/オーディオをダウンロードする方法を探してここに来た人にとって、この答えは私にとってうまくいきました。要するに、あなたはを通して所望のウェブページ上の* .m3u8ファイルを見つける必要があるでしょうクローム > - ネットワーク]タブとに貼り付けVLCプレーヤー。

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

前の回答で述べたように、それをurlにデコードする方法はありません。クロムdevtoolsパネルからそれを表示しようとした場合でも、URLはまだblobとしてエンコードされている可能性があります。

ただし、データを取得することは可能です。データを取得する別の方法は、データをアンカーに入れて直接ダウンロードすることです。

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

これをblobのURLを含むページに挿入してボタンをクリックすると、コンテンツが表示されます。

もう1つの方法は、プロキシサーバー経由でajax呼び出しをインターセプトすることです。これにより、実際の画像のURLを表示できます。