[解決済み] blob URL を通常の URL に変換する

質問

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

として使っているのですが <img> 's src 属性があります。

どのように解決するのですか？

JavaScriptから作成されたURL Blob から作成されたURLは、通常のURLに変換することができません。

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

そのため、一般的には Blob URL を通常の URL に変換することは、一般的には意味がありません。もし普通の URL が欲しいのであれば、ブラウザからデータをサーバーに送り、サーバーが普通のファイルのように利用できるようにする必要があります。

を変換することは可能です。 blob: の URL を data: の URL に変換することができます（少なくとも Chrome では）。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 とは異なるもので、サイズが大きくなる可能性があります。しかし、共有できるという点では通常の URL のように機能します。