AngularJS - отображение изображения из байтов

Question

В моем приложении AngularJS webapp мне нужно загрузить изображение из файла, а затем отобразить его. Но это не сработает.

Мой звенеть является: http://plnkr.co/edit/gpwyUd3Hh6HvrBnt2dR6

Мой JavaScript является:

var test = function() { 
var getImgBytes = function() { 
    return $http({ url: 'Spa_03.jpg', 
         method: 'GET', 
         headers: {'Content-Type': 'image/jpeg'}}) 
    .then(
     function(result) { 
     console.log('load img from file'); 
     $scope.imgTest = result.data; 
    }); 
    }(); 
$scope.height = 853; 
$scope.width = 1280; }(); 

Мой HTML является:

<img ng-src="data:image/JPEG,{{imgTest}}" width="320px" height="213px"/> 

Может кто-нибудь помочь мне решить эту проблему?

С уважением.

Answer 1

Если вы загружаете изображение через $ http request, это не кодированное значение base64. Он имеет двоичный формат файла и вам нужно преобразовать его в base64 через Javascript или canvas. Попробуйте https://stackoverflow.com/a/6150397

Answer 2

Этот код работает для меня непосредственно из приведенного выше ответа с незначительными правками

function toDataURL(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    } 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    // xhr.setRequestHeader("username", auth.username); 
    // xhr.setRequestHeader("password", auth.password); 
    xhr.responseType = 'blob'; 

    xhr.send(); 
} 


toDataURL('http://whatever/file/fid/'+ xRequest, function(dataUrl) { 
    //console.log('RESULT:', dataUrl) 
    $scope.loading = false; 
    $scope.image = dataUrl; 
}) 

Затем вы можете использовать масштаб изображения жгутов вашего HTML, как этот

<div class="content-avatar"><img ng-src="{{image}}" />