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

Question

I am trying to send an image as base64 string in response in angularjs but the controller is moving to the error function. 我正在尝试将图像作为base64字符串发送来响应在angularjs中，但是控制器正在移至错误功能。

The controller of angularjs is like this 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');
            });
        }

The .cshtml view is like this .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>

The jsonresult showimage() in Home controller is like this 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);
        }

I want the angularjs to hit success function and display the image. 我希望angularjs击中成功函数并显示图像。 Thanks in advance. 提前致谢。

Answer 1

I am assuming that response.data contains the base64 code of the image. 我假设response.data包含图像的base64代码。 (please comment if otherwise) （如果没有，请发表评论）

You should be using ng-src probably 您可能应该使用ng-src

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

Otherwise the {{image}} expression will not get bound with $scope.image and evaluated by Angular. 否则{{image}}表达式将不会与$scope.image绑定并由Angular求值。

Answer 2

The problem is that you're returning the base64-encoded image data directly as a JSON response. 问题在于您将直接返回以base64编码的图像数据作为JSON响应。 It is not JSON and can't be decoded as such, hence your error. 它不是 JSON，因此无法解码，因此会出错。 Instead, you should return something like: 相反，您应该返回以下内容：

return Json(new { image = base64string });

This will result in an actual JSON document like: 这将产生一个实际的JSON文档，例如：

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

You can then access the image member of your response data object: 然后，您可以访问响应数据对象的image成员：

$scope.image = response.data.image;

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

问题描述

2 个解决方案

解决方案1
1 2017-04-04 14:48:40

解决方案2
0 2017-04-04 15:08:52

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

问题描述

2 个解决方案

解决方案1 1 2017-04-04 14:48:40

解决方案2 0 2017-04-04 15:08:52

解决方案1
1 2017-04-04 14:48:40

解决方案2
0 2017-04-04 15:08:52