web-dev-qa-db-ja.com

Angular JSでバイト配列として受信した画像を表示する方法

画像を返すサーバー側アプリケーションがあります。これらは応答ヘッダーです：

Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1

角度で、私は画像を表示する必要があります。画像を取得するとき、angularJS $httpを使用してサーバーを呼び出し、結果をスコープに入れますが、$httpの成功関数に到達することはありません。このpostmanからの呼び出しを実行すると、通常どおり画像が返されます。 Angularを取得して画像を表示する方法に興味があります。

これは私が画像を表示する方法です：

<img ng-src={{image}} />

サーバーから画像を取得するための呼び出しは次のとおりです。

$http.get(url, {responseType: "arraybuffer"})
    .success(function(data) {
        $scope.image= data;
    }
)
javascriptangularjsimagebytearrayhttpresponse
9
Loshmeey

.thenから返されたpromiseの.success関数ではなく、$http.get関数を使用する必要があるという点で、ベルの応答に同意します。ただし、ng-src参照にはURLを指定せず、バイト配列への参照を指定しているため、引き続き問題が発生すると思います。

ng-src参照をクライアントのメモリに保持されているバイト配列にバインドするには、バインドは次の形式にする必要があります。

<img ng-src="data:image/JPEG;base64,{{image}}">

編集

明示的に言及したことがないので、上記のng-srcバインディングは、画像データがbase64形式であることを前提としています。 HarrisonAは、配列がまだbase64形式でない場合に配列を変換するためのメソッドを以下に提供しました。

10
jdmcnair

jdmcnairの回答とLoshmeeyのコメントに追加したかっただけです：

以下は、配列バッファーをbase 64文字列に変換するために使用した関数へのリンクです。

ArrayBufferからbase64でエンコードされた文字列

関数：

function _arrayBufferToBase64( buffer ) {
  var binary = '';
  var bytes = new Uint8Array( buffer );
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode( bytes[ i ] );
  }
  return window.btoa( binary );
}

私はこの関数をmy angularコントローラで使用し、結果を（$ scope変数を使用して）HTMLファイルのimg要素に渡しました。

7
HarrisonA
  • angular documentation で、、次にコールバックを使用する必要があると思いますsuccessコールバックは非推奨になりました。
  • あなたのimgはdata応答プロパティにあります。

これらの考慮事項の後、このようなものを試すことができます。

$http.get(url, {responseType: "arraybuffer"} ).then(function(response) { 
$scope.image= response.data; });
2
Bellu