GETデータ：image/png; base64、{{image}} net :: ERR_INVALID_URL

Question

Angular.jsを使用してサーバから取得した画像データを（イオンフレームワークで使用するために）変換したい、このコードを使用しています：

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

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

そして、私のhtmlでこのコードを使用します。

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

しかし、このエラーは常に表示さ：

GETデータ：画像/ PNG; base64で、{{画像}}ネット:: ERR_INVALID_URL

誰でも手助けできますか？画像のbase64エンコードへ

Answer 1

作業アプローチは、キャンバスとtoDataURL()方法を使用することですが、あなたは（srcプロパティを経由して）画像 istanceにサーバーから画像データをロードする必要があります。次に例を示します。

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

好ましくはあなたがサーバー側にあなたの画像をbase64でエンコードされ、すでにクライアントへの応答を返すようにコード化することができます。後半に答えけれども

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

Answer 2

が、将来の読者のために参考になります：PHPで例えば

あなたがやるべきことは次のとおりです。ブラウザがすることを意味する

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

データがロードされてAngularJSが処理する場合にのみアクセスしてください。したがって、そのエラーはもう発生しません。