Как вернуть изображение из $ http.get в AngularJS

angularjs

34487 просмотра

3 ответа

В моем контроллере я вызываю сервис, который возвращает обещание

var onComplete = function(data) {
               $scope.myImage = data;           
            };

В моем сервисе я звоню, чтобы получить изображение, передавая URL непосредственно к самому изображению:

   return $http.get("http://someurl.com/someimagepath")
         .then(function(response){          
          return response.data;
         });

Все вызовы выполняются успешно, и response.data, кажется, содержит изображение внутри:

����JFIF��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90
��C




��C      

����"�� 
���}!1AQa"q2���#B��R��$

хотя я не уверен, что это действительно так, потому что у меня проблемы с отображением. Я пытался (внутри index.html)

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

Идеи? Можно ли вернуть реальное изображение из $ http.get и преобразовать его ответ обратно в изображение (jpeg и т. Д.)

Спасибо!

Автор: ra170 Источник Размещён: 12.11.2019 09:27

Ответы (3)


7 плюса

Решение

Возвращаемое изображение находится в двоичном кодировании , а не в Base64.

Понятно, что <img>теги не поддерживают поиск из двоичных файлов через атрибуты, поэтому вам придется искать другое решение.

Вы можете попробовать преобразовать двоичную кодировку в Base64 на стороне клиента, используя TypedArrays вместе с btoaфункцией. Тогда вы сможете использовать

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

Это руководство Mozilla описывает создание XHR-запроса и изображения и считывание их непосредственно в UInt8Array. Это должно быть хорошей отправной точкой.

Он написан для простого старого Javascript, но его перевод на Angular должен быть хорошим упражнением, если вы только изучаете веревки.

Автор: Dan Prince Размещён: 21.04.2015 06:26

31 плюса

Ни один из методов не кажется законченным, это полное решение:

  $http({
    method: 'GET',
    url: imageUrl,
    responseType: 'arraybuffer'
  }).then(function(response) {
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    console.log(str);
    // str is base64 encoded.
  }, function(response) {
    console.error('error in getting static img.');
  });


  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);
  }

Тогда я могу использовать его напрямую:

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

Функция преобразования массива в буфер base64 напрямую берется из ArrayBuffer в строку, закодированную в base64.

Автор: paradite Размещён: 21.09.2016 03:45

17 плюса

На всякий случай, если это кому-нибудь нужно.

В моем случае мне пришлось отправить запрос через $httpслужбу Angular из-за различных трансформаторов и других интересных вещей, которые мы делаем с ним.

Поэтому, основываясь на упомянутом ранее руководстве Mozilla , я нашел следующее решение:

let getImageDataURL = (url, imageType = 'image/jpeg') => {
  return $http.get(url, {responseType: 'arraybuffer'}).then((res) => {
    let blob = new Blob([res.data], {type: imageType});
    return (window.URL || window.webkitURL).createObjectURL(blob);
  });
};

Основная идея состоит в том, чтобы установить responseTypeсвойство базового XHR-запроса и преобразовать двоичное содержимое в URL-адрес данных.

Автор: korya Размещён: 19.02.2016 08:50
Вопросы из категории :
32x32