it-roy-ru.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. Выполнение этого звонка от почтальона возвращает изображение в обычном режиме. Мне интересно, как получить Angular для отображения изображения.

Вот как я отображаю изображение:

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

Вот вызов для получения изображения с сервера:

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

Я согласен с ответом Беллу в том, что вы должны использовать функцию .then вместо функции .success в обещании, возвращенном из $http.get. Тем не менее, я думаю, что у вас все еще будет проблема с вашей ссылкой ng-src в том, что вы не предоставляете ей URL, а вместо этого ссылку на свой байтовый массив.

Чтобы связать вашу ссылку ng-src с байтовым массивом, хранящимся в памяти на клиенте, ваша привязка должна иметь следующую форму:

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

Правка

Поскольку я никогда не упоминал об этом явно, привязка ng-src выше предполагает, что ваши данные изображения имеют формат base64. HarrisonA предоставил метод ниже для преобразования массива, если он еще не в формате base64.

9
jdmcnair

Просто хотел добавить в ответ jdmcnair и комментарий Лошмея:

Ниже приведена ссылка на функцию, которую я использовал для преобразования буфера массива в строку 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 );
}

Я использовал эту функцию в своем угловом контроллере, а затем передал результат (используя переменную $ scope) в элемент img в моем html-файле. 

7
HarrisonA
  • Я думаю, что вы должны использовать обратный вызов then, в угловом документация они говорят, что обратный вызов success был устаревшим
  • Ваш img находится в свойстве ответа data.

После этих соображений вы можете попробовать что-то вроде этого.

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