从 angularJS 抓取 php base64 图像

Question

我正在尝试从 angularJS 中获取 php 中的 64base 编码字符串，但我不太确定我做错了什么。我编码了由 php 运行的 makegray.exe 写入服务器的图像。现在我正在尝试抓取该图像并将其返回给 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 图像作为 img 标签的 src 轻松渲染。 ng-src 应该对此有所帮助。

如果你想要图像作为字符串，你应该检查 response object。

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

希望这有助于其他任何尝试使用 base64 编码字符串从 php 向 JS 显示图像的人！

从 angularJS 抓取 php base64 图像

Grabbing a php base64 image from angularJS

php

base64

angularjs