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

Question

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

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��$ 

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

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

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

Спасибо!

Answer 1

Изображение, которое возвращается, находится в binary encoding, а не Base64.

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

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

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

This guide побочным Mozilla охватывает делает запрос XHR для и изображения и читать его непосредственно в UInt8Array. Это должно быть хорошим стартовым местом.

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

Answer 2

На всякий случай кому это нужно.

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

Так на основе Mozilla's guide упоминалось ранее, я придумал следующее решение:

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 данных ,

Answer 3

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

$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}}"> 

Функция для преобразования ArrayBuffer в base64 взято непосредственно из ArrayBuffer to base64 encoded string