如何在angularjs中以$http的形式发送base64字符串作为响应_Angularjs_Asp.net Mvc

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

angularjs asp.net-mvc

如何在angularjs中以$http的形式发送base64字符串作为响应,angularjs,asp.net-mvc,Angularjs,Asp.net Mvc,我试图在angularjs中以base64字符串的形式发送一个图像作为响应，但控制器正在移动到错误函数 angularjs的控制器是这样的 angular.module('app', []).controller('showimageCtrl', showcustomimagecontroller); showcustomimagecontroller.$inject = ['$scope', '$http']; function showcustomimagec

我试图在angularjs中以base64字符串的形式发送一个图像作为响应，但控制器正在移动到错误函数

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

@{
    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>

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

.cshtml视图如下所示

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

@{
    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>

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点击成功函数并显示图像。提前感谢。

我假设response.data包含图像的base64代码。如果没有，请发表评论

您可能应该使用ngsrc

否则{image}}表达式将不会与$scope.image绑定并按Angular进行计算。

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

return Json(new { image = base64string });

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

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

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

$scope.image = response.data.image;

错误是什么？当我使用调试器时，我得到这个错误响应=SyntaxError:Unexpected token� 在JSON位置0处的JSON.parse处的jc处的q处的JSON中，您能为我打印byte64String变量吗？JSON转换的结果似乎有问题，请也尝试一下。也许对你有帮助。