Grabbing a php base64 image from angularJS - php

Question

I'm trying to grab a 64base encoded string in php from angularJS and I'm not quite sure what I'm doing wrong. I've encoded an image that was written to server by the makegray.exe that php runs. Now I'm trying to grab that image and give it back to the angularJS that then displays it for the user. This seems like such a simple problem but I'm stumped as to how to do this.
$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");
}
}
First of all use .then() in place of your deprecated functions .success() and .error()
then also capture response as in above code.
you can render the base64 image easily by having it as src of an img tag. ng-src should help for that.
if you want the image as string, you should check response object instead.

Answer 2

Ok I got it to work...
$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");
}
}
Hope this helps anyone else trying to display an image to JS from php using base64 encoded strings!