在HTML img中将图像显示为ASP.Net核心Web Api返回的base64数据_Html_Asp.net Core 2.0_Asp.net Core Webapi

在HTML img中将图像显示为ASP.Net核心Web Api返回的base64数据

html

在HTML img中将图像显示为ASP.Net核心Web Api返回的base64数据,html,asp.net-core-2.0,asp.net-core-webapi,Html,Asp.net Core 2.0,Asp.net Core Webapi,我正在使用ASP.NETCore2.1WebAPI。我试图从API端点发送base64数据，比如数据：image/png；xxxx年6月64日并在HTML img标记中使用它。第一个和第二个图像渲染，但第三个和第四个图像不渲染我的问题是：如何在不使用JavaScript/JQuery的情况下呈现第三个图像我犯了什么错误，我的第四个图像没有渲染我是Asp.Net核心的新手。所以，如果代码中有任何幼稚的错误，请更正提前到达塔克斯 HTML 图像测试 1:-通过JavaScri

我正在使用ASP.NETCore2.1WebAPI。我试图从API端点发送base64数据，比如数据：image/png；xxxx年6月64日并在HTML img标记中使用它。第一个和第二个图像渲染，但第三个和第四个图像不渲染

我的问题是：

如何在不使用JavaScript/JQuery的情况下呈现第三个图像
我犯了什么错误，我的第四个图像没有渲染

我是Asp.Net核心的新手。所以，如果代码中有任何幼稚的错误，请更正

提前到达塔克斯

HTML


图像测试

1:-通过JavaScript创建图像

2:-来自GetPng的图像：


3:-来自GetBase64Uri的图像：


4:-来自PngFromBase64的图像：

ASP.NETWebAPI控制器

namespace LaTex.WebApi.Controllers
{
[路由（“api/[controller]/[action]”）
[ApiController]
公共类LaTexImageController:ControllerBase
{
私有常数int_PX=20；
私有异步任务GetImgApiData（字符串tex、int-px、int-encoded）
{
if（px可以将base64数据URI直接提供到src
属性中
误读，不确定如何删除我的答案，因为与情况无关：/n你知道我是否用返回base64 Uri的API端点替换src吗？
<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />

    <title>Image Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <p>
        1:- Image Through JavaScript
        <img id="sample-img" />
    </p>

    <script type="text/javascript">
        $(function () {
            var url = "https://localhost:44367/api/LatexImage/GetBase64Uri";
            $.get(url, function (data) {
                //console.log(data);
                $("#sample-img").attr('src', data);
            });
        })
    </script>
    <p>
        2:- Image from GetPng:
        <img src="https://localhost:44367/api/LatexImage/GetPng" />
    </p>
    <p>
        3:- Image from GetBase64Uri:
        <img src="https://localhost:44367/api/LatexImage/GetBase64Uri" />
    </p>

    <p>
        4:- Image from PngFromBase64:
        <img src="https://localhost:44367/api/LatexImage/PngFromBase64?Base64Png=iVBORw0KGgoAAAANSUhEUgAAADoAAAASCAIAAACFJlokAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAADtElEQVRIibVWW0gqXRReHWcItCBCtNLAkkAkqCCVqKDbgwS9FNH9wUK6QRT0ENGNiCAfgsCExBeDIkGksKJEejEiEkoxNJICkygfBC%2Fg5Ew5%2F8Oc31%2F0%2FIdOzfme1t7rW9%2F%2BZs3M3juLJEmgDziOJxIJGgVTgaIoQqMchmHz8%2FOVlZU0aqaivLw8i8bu7u%2Fvs9nsuro6ugQz8YNGLZfL9Ve9Ao1239%2FfURSlSy0VsVjMYDC4XC4AAJImmEwmm81Gl1oqNjc3w%2BHw0NCQ2Wymrbu3t7e1tbW%2FTEUikd3dXa%2FX%2B0kpp9NpNBqTw%2BvraxaLJRKJbm5u6LGLYRiCIFlZWZkpkiS3t7dbW1uXl5fPz8%2FTspFIJLPk4eFBr9cnhzqdDgDcbrdCofi6XRzHk%2FHp6Wl9ff0vaYlEwuFw5OXllZSUOByOtOzq6mpmSTAYFIvFqTN7e3sLCws8Hu%2BnXZ%2FPp1ar9Xp9OBz%2BjFeSJNva2uLxODVM2xPMZrNGo7m4uAgGgwwGQ6fT4Tju8%2Fl6eno%2BI26321EUVavV1OPt7OwQBOFyuSwWCwIAHo9Ho9Gsra1tbGxYLJbOzk6K5PF40oQ4HM7ExATVAIFA4HQ6pVJp2p6wvr7OZDLHxsY6OjqUSqVcLqfUVCpVfn7%2BZxrx9PSkUCiqqqp6e3tNJlMoFHp7ewsGg11dXQgALC4uDg8PM5nMgYGBoqIiqqyvr%2B83omw2WyKRXF5eSqVSq9WabO3z8%2FPJycnx8TEAxOPx5uZmANBqtTk5OVdXVywWq6mpye%2F3b21tUfz7%2B%2Fu5uTkq7u%2FvF4lEj4%2BP2dnZNTU14XAYwzAAGB8fT66LEAQRCASo9fh8PvnvIWcwGO7u7jK7Ozo6SsUVFRVarRYA3G731NQUNWmz2bhcLoIgXq83Nzf39fWVx%2BPFYrFoNPry8jI4OAgAxcXFKysrFH9mZiYZU7Db7SKRCADOzs4KCgrSDCAoihYWFhIEgSCI0Wisrq4WCoUA0N7e%2FvHxkcb%2B8eO%2FX1MikahUKoqT3BPEYrHVagUAvV4vEAiOjo5GRkYmJyf%2F9zVlQCgUOp1OHMcPDw%2Bnp6fTsoylpSWZTGYwGDweT0NDg0Ag%2BJlgMJAMMBiM1OKDgwOCIIRCYWlpKTXD5XIxDLPb7XK5PBAINDY2cjic35izWq0tLS2pMzweLxQK2Ww2pVJZVlaWXvCd82Z2dra7u5sgiC8r%2BP3%2BP%2BJ%2F6wIpk8mi0SiCfF2Ez%2Bf%2FEf9bF0iSJBOJRNoX8lfxD9Bi173YEwzdAAAAAElFTkSuQmCC" />
    </p>

</body>
</html>

namespace LaTex.WebApi.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class LaTexImageController : ControllerBase
    {

        private const int _PX = 20;

        private async Task<byte[]> GetImgApiData( string tex, int px, int encoded)
        {

            if (px <= 0)
            {
                px = _PX;
            }

            if (string.IsNullOrEmpty(tex) || (tex.Trim().Length == 0))
            {
                tex = @"x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}";
            }

            if (encoded == 0)
            {
                tex = WebUtility.UrlEncode(tex);
            }

            string ImgApiUrl = $"https://chart.apis.google.com/chart?cht=tx&chs={px}&chl={tex}";

            using (HttpClient client = new HttpClient())
            {
                HttpResponseMessage response = await client.GetAsync(ImgApiUrl);
                byte[] bytes = await response.Content.ReadAsByteArrayAsync();

                return bytes;
            }
        }

        [HttpGet]
        public async Task<IActionResult> GetPng([FromQuery] string tex, int px, int encoded)
        {
            byte[] ImgApiDataBytes = await GetImgApiData(tex, px, encoded);
            return File(ImgApiDataBytes, "image/png");
        }

        public async Task<string> GetBase64([FromQuery] string tex, int px, int encoded)
        {
            byte[] ImgApiDataBytes = await GetImgApiData(tex, px, encoded);
            return (Convert.ToBase64String(ImgApiDataBytes));
        }

        [HttpGet]
        //public async Task<string> GetBase64Uri([FromQuery] string tex, int px, int encoded)
        public async Task<string> GetBase64Uri([FromQuery] string tex, int px, int encoded)
        {
            return ("data:image/png;base64," + await GetBase64(tex, px, encoded));
        }

        [HttpGet]
        public IActionResult PngFromBase64([FromQuery] string Base64Png)
        {
            byte[] image = Convert.FromBase64String(Base64Png);

            return File(image, "image/png");
        }
    }
}