オクテットストリームを画像に変換する

Question

$ http.getを使用してファイルを取得する必要があります。 データはapplication/octet-streamとして返されます しかし、私はこのファイルが画像であることを知っています。

このファイルを画像として表示するにはどうすればよいですか？

は私が

var nuroImage = new Image(); 
nuroImage.onload = function { 
    scope.imageSrc = this.src; 
} 

$http(req).then(
    funciton(response) { 
    nuroImage.src = "data:application/octet-stream," + response.data 
    } 

私は200OK取得を試みたが、画像は

それはJPEG/PNGにoctet-streamのを変換することは可能です

が表示されませんか？ HTML5ファイルに

• 使用atobたランレングス圧縮された画像ファイルをエンコードする
• そして、それを含めるように<img src="data:image/png;base64,....">を使用

の場合：

Answer 1

あなたはを使用することができます第二の例では、「アプリケーション/オクテットストリーム、データを」 `応答が`除去試みるURI` `データが既にある場合Blobとして要求画像に、URL.createObjectURL()応答から

var nuroImage = new Image; 
var request = new XMLHttpRequest(); 
request.responseType = "blob"; 
request.onload = function() { 
    nuroImage.src = URL.createObjectURL(this.response) 
} 
request.open("GET", "/path/to/image/file"); 
request.send(); 

Answer 2

私はあなたがこのような何かを必要がありますねあなたのファイルはPNGではありません、対応するMIMEタイプを追加してください。

サンプル：

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/ 
 
f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67 
 
QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g7 
 
7ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"/>

• https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob
• http://www.html5rocks.com/en/tutorials/canvas/integrating/