GET dữ liệu: image/png; base64, {{image}} net :: ERR_INVALID_URL

Question

Tôi muốn chuyển đổi dữ liệu hình ảnh mà tôi nhận được từ máy chủ bằng Angular.js (để sử dụng trong ionic-framework), tôi đã sử dụng mã này :

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

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

Và sử dụng mã này trong html của tôi:

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

Nhưng lỗi này luôn hiển thị:

GET dữ liệu: image/png; base64, {{image}} net :: ERR_INVALID_URL

ai cũng có thể trợ giúp?

Answer 1

Một cách tiếp cận và làm việc tại mã hóa base64 của hình ảnh là sử dụng Canvas và toDataURL() phương pháp, nhưng bạn cần phải tải dữ liệu hình ảnh của bạn từ máy chủ đến một ảnh istance (thông qua sở hữu src). Dưới đây là một ví dụ:

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

Tốt bạn có thể mã hóa để Base64 hình ảnh của bạn ở phía bên máy chủ và trả lại phản ứng cho khách hàng đã được mã hóa. Ví dụ trong 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

Mặc dù một câu trả lời muộn, nhưng sẽ rất hữu ích cho độc giả trong tương lai:

gì bạn cần làm là:

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

Điều đó có nghĩa rằng trình duyệt sẽ cố gắng truy cập nó chỉ khi dữ liệu được tải và sẽ được AngularJS quan tâm và do đó bạn sẽ không nhận được lỗi đó nữa.