Asp.net-Web-Api

直接從 Web api 核心端點返回 base64 編碼圖像

  • March 3, 2018

我已經看到了這些答案:

但這些要麼直接提供物理文件,要麼從字節數組提供服務。

請問有沒有辦法讓我們的 Web API 端點直接從 data:image/png;base64,(我們的 base64 字元串)返回 content-type: image/png

從文件夾中讀取文件非常簡單。訣竅是在ASP.NET Core中使用IHostingEnvironment來獲取目前的 Web 根路徑。

文件控制器

using System;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;

namespace DemoWebApiCore.Controllers
{
   [Route("api/[controller]")]
   public class FilesController : Controller
   {
       private readonly IHostingEnvironment _hostingEnvironment;

       public FilesController(IHostingEnvironment hostingEnvironment)
       {
           _hostingEnvironment = hostingEnvironment;
       }

       // GET api/files/sample.png
       [HttpGet("{fileName}")]
       public string Get(string fileName)
       {
           string path = _hostingEnvironment.WebRootPath + "/images/" + fileName;
           byte[] b = System.IO.File.ReadAllBytes(path);
           return "data:image/png;base64," + Convert.ToBase64String(b);
       }
   }
}

用法

家庭控制器.cs

using Microsoft.AspNetCore.Mvc;

namespace DemoWebApiCore.Controllers
{
   public class HomeController : Controller
   {
       // GET: /<controller>/
       public IActionResult Index()
       {
           return View();
       }
   }
}

索引.cshtml

<html>
<body>
   <img id="sample-img" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script type="text/javascript">
       $(function () {
           var url = "/api/files/sample.png";
           $.get(url, function (data) {
               console.log(data);
               $("#sample-img").attr('src', data);
           });
       })
   </script>
</body>
</html>

引用自:https://stackoverflow.com/questions/44860069