BLOB URLを通常のURLに変換する

Question

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

私はこれを<img>のsrc属性として使用しています。

Answer 1

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

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

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

URLはblob:のURLを少なくともChromeのdata:に変換することができます。 blob: URLからのデータを "フェッチ"するAJAXリクエストを使用することができます（実際にはブラウザのメモリから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のように動作します。現在のブラウザやセッションに固有のものではありません。

Answer 2

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、常にie < 9を除く）