如何在angularjs中的$http中发送base64字符串作为响应答案

【问题标题】：how to send base64 string as response in $http in angularjs如何在angularjs中的$http中发送base64字符串作为响应
【发布时间】：2017-04-04 14:25:06
【问题描述】：

我正在尝试将图像作为 base64 字符串发送以响应 angularjs，但控制器正在移动到错误函数。

angularjs的控制器是这样的

angular.module('app', []).controller('showimageCtrl', showcustomimagecontroller);
        showcustomimagecontroller.$inject = ['$scope', '$http'];
        function showcustomimagecontroller($scope, $http) {
            $http({
                url: '/Home/showimage',
                method: 'post'
            }).then(function (response) {
                $scope.image = response.data;
            }, function (response) {
                alert('error');
            });
        }

.cshtml 视图是这样的

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>textonimage</title>
    <script src="~/scripts/jquery-3.1.1.min.js"></script>
    <script src="~/scripts/angular.min.js"></script>
    <script src="~/app/controller/myimagectrl.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="showimageCtrl"> 
        <img width="1000" id="y" src="data:image/png;base64,{{image}}" />
    </div>
</body>
</html>

Home控制器中的jsonresult showimage()是这样的

public JsonResult showimage()
        {
            //creating a image object
            System.Drawing.Image bitmap = (System.Drawing.Image)Bitmap.FromFile(Server.MapPath("/images/DSC06528.JPG")); // set image 
                                                                                                                         //draw the image object using a Graphics object
            Graphics graphicsImage = Graphics.FromImage(bitmap);
            //Set the alignment based on the coordinates   
            StringFormat stringformat = new StringFormat();
            stringformat.Alignment = StringAlignment.Far;
            stringformat.LineAlignment = StringAlignment.Far;
            StringFormat stringformat2 = new StringFormat();
            stringformat2.Alignment = StringAlignment.Far;
            stringformat2.LineAlignment = StringAlignment.Far;
            //Set the font color/format/size etc..  
            Color StringColor = System.Drawing.ColorTranslator.FromHtml("#933eea");//direct color adding
            Color StringColor2 = System.Drawing.ColorTranslator.FromHtml("#e80c88");//customise color adding
            string Str_TextOnImage = "Happy";//Your Text On Image
            string Str_TextOnImage2 = "Onam";//Your Text On Image
            graphicsImage.DrawString(Str_TextOnImage, new Font("arial", 400,
            FontStyle.Regular), new SolidBrush(StringColor), new Point(3000, 545),
            stringformat); Response.ContentType = "image/jpeg";
            graphicsImage.DrawString(Str_TextOnImage2, new Font("Edwardian Script ITC", 401,
            FontStyle.Bold), new SolidBrush(StringColor2), new Point(4000, 545),
            stringformat2); Response.ContentType = "image/jpeg";
            bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
            ImageConverter converter = new ImageConverter();
            byte[] j= (byte[])converter.ConvertTo(bitmap, typeof(byte[]));
            string base64String = Convert.ToBase64String(j, 0, j.Length);
            return Json(base64String);
        }

我希望 angularjs 能够点击成功功能并显示图像。提前致谢。

【问题讨论】：

错误是什么？
当我使用调试器时，我收到此错误响应 = SyntaxError: Unexpected token � in JSON at JSON.parse () at Ic (localhost:3382/scripts/angular.min.js:16:379) at jc (@) 987654322@) localhost:3382/scripts/angular.min.js:96:201 q (localhost:3382/scripts/angular
你能帮我打印一下 byte64String 变量和 Json(byte64String) 的结果吗
json 转换似乎有问题，请也尝试this。可能会对你有所帮助。

标签： angularjs asp.net-mvc

【解决方案1】：

我假设response.data 包含图像的base64 代码。（否则请评论）

您可能应该使用ng-src

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

否则{{image}} 表达式将不会与$scope.image 绑定并由 Angular 评估。

【讨论】：

【解决方案2】：

问题是您将 base64 编码的图像数据直接作为 JSON 响应返回。它是 not JSON，因此无法解码，因此您的错误。相反，您应该返回如下内容：

return Json(new { image = base64string });

这将产生一个实际的 JSON 文档，如：

{ "image": "[base64 encoded data]" }

然后您可以访问响应数据对象的image 成员：

$scope.image = response.data.image;

【讨论】：