Grabbing php base64 image from angularJS

Question

Я пытаюсь захватить строку с кодировкой 64base в php от angularJS, и я не совсем уверен, что я делаю неправильно. Я закодировал изображение, написанное на сервере makegray.exe, которое запускает php. Теперь я пытаюсь захватить это изображение и вернуть его в angularJS, который затем отображает его для пользователя. Это похоже на такую ​​простую проблему, но я не понимаю, как это сделать.

$scope.MakeGray_Button = function(){ 
    if ($scope.imageUrl) { 
     var MakeGray_Form = new FormData(); 
     MakeGray_Form.append("FileName", $scope.imageUrl); 
     $http({ 
     method : "POST", 
     url : "../opencv/MakeGray/MakeGray.php", 
     data : MakeGray_Form, 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
     }). 
     success(function(){      
      // some magic code here that grabs the $base64 variable from php 
     }) 
     .error(function(){}); 
    } 
    else{ 
     alert("Please upload an image"); 
    } 
} 

PHP

<?php 

$imgname = $_POST["FileName"]; 
$inputDir = "../../uploads/" . $imgname; 
$outputDir = "../../processed/" . $imgname; 

$MakeGray = "./makegray " . $inputDir . " " . $outputDir; 
$runExec = exec($MakeGray, $out); 

$type = pathinfo($outputDir, PATHINFO_EXTENSION); 

$data = file_get_contents($outputDir); 
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data); 

echo "$base64"; 

?> 

Answer 1

$scope.MakeGray_Button = function(){ 
    if ($scope.imageUrl) { 
     var MakeGray_Form = new FormData(); 
     MakeGray_Form.append("FileName", $scope.imageUrl); 
     $http({ 
     method : "POST", 
     url : "../opencv/MakeGray/MakeGray.php", 
     data : MakeGray_Form, 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
     }).then(function(response){      
      //response object should hold your base64 image data. 
      //you can change src of an img tag with ng-src and let the browser render your image. 
     },function(response){}); 
    } 
    else{ 
     alert("Please upload an image"); 
    } 
} 

Прежде всего использовать .then() вместо ваших устаревших функций .success() и .error()

затем также захватить response как в коде выше.

Вы можете визуализировать изображение base64, указав его как src тега img. ng-src должен помочь в этом.

Если вы хотите изображение как строку, вы должны проверить объект response.

Answer 2

Хорошо я получил его на работу ...

$scope.MakeGray_Button = function(){ 
    if ($scope.imageUrl) { 
     var MakeGray_Form = new FormData(); 
     MakeGray_Form.append("FileName", $scope.imageUrl); 
     $http({ 
     method : "POST", 
     url : "../opencv/MakeGray/MakeGray.php", 
     data : MakeGray_Form, 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
     }). 
     success(function(data){      
      $scope.data = data; 
      base64 = data; 
      $("#img2").prop("src", base64); 
     }) 
     .error(function(){}); 
    } 
    else{ 
     alert("Please upload an image"); 
    } 
} 

Надеется, что это помогает кто-то другое пытается отобразить изображение в JS из PHP с помощью base64 кодированных строк!