Pobierz dane: image/png; base64, {{image}} net :: ERR_INVALID_URL

Question

Chcę przekonwertować dane obrazu, które otrzymuję z serwera za pomocą Angular.js (do użytku w systemie jonowym), używam tego kodu :

$http.post(link, { 
      token: token, 
      reservationCode: reservationCode 
      }).success(function (res){ 
      $scope.image = btoa(unescape(encodeURIComponent(res))); 

     }).error(function (data) { 
      return false; 
     }); 

I użyć tego kodu w moim HTML:

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

Ale ten błąd zawsze przedstawiają:

uzyskać dane: image/png; base64, {{zdjęcie}} netto :: ERR_INVALID_URL

ktoś może pomóc?

Answer 1

podejście robocze do kodowania base64 obrazów jest użycie Canvas i toDataURL() metody, ale trzeba załadować dane obrazu z serwera do Obrazek istance (poprzez własności SRC). Oto przykład:

function getBase64() { 
    var canvas = document.createElement('canvas'); 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     // pay attention: image here contains complete base 64 data url, no need for "data:image/png;base64," header... 
     $scope.image = canvas.toDataURL(); 
     if (!$scope.$$phase) $scope.$apply(); 
    }; 
    img.src = "http://.../myImagepng"; 
} 

Korzystnie można zakodować do base64 obraz po stronie serwera i zwróci odpowiedź do klienta już zakodowany. Na przykład w PHP:

$pathToImg = 'myfolder/myimage.png'; 
$type = pathinfo($pathToImg, PATHINFO_EXTENSION); 
$data = file_get_contents($pathToImg); 
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data); 

Answer 2

mimo późnej odpowiedzi, ale będą pomocne dla przyszłych czytelników:

Co należy zrobić, to:

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

Oznaczałoby to, że przeglądarka będzie spróbuj uzyskać do niego dostęp tylko wtedy, gdy dane zostaną załadowane i będą obsługiwane przez AngularJS, a tym samym nie dostaniesz już tego błędu.