119

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

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

4

7 に答える 7

197

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

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

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

少なくとも Chrome では、blob:URL を URL に変換できます。data:AJAX リクエストを使用して、URL からデータを「フェッチ」できblob:ます (実際には、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 と同じように機能します。現在のブラウザやセッションに固有のものではありません。

于 2013-04-23T21:57:31.727 に答える
16

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)

于 2015-07-23T07:44:16.420 に答える
-2

前の回答が言ったように、それをデコードして url に戻す方法はありません。chrome devtools パネルから表示しようとしても、url はまだ blob としてエンコードされている可能性があります。

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

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

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

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

于 2018-05-12T06:08:15.797 に答える