11

I have seen these SO answers:

but these either serve physical files directly or serve from a byte array.

Please is there a way for our Web API Endpoint to return content-type: image/png directly from data:image/png;base64,(our base64 string)

Charles Okwuagwu
  • 10,538
  • 16
  • 87
  • 157

2 Answers2

17

It is quite straight forward to read a file from a folder. The trick is to use IHostingEnvironment in ASP.NET Core to get the current web root path.

FilesController

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

Usage

HomeController.cs

using Microsoft.AspNetCore.Mvc;

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

Index.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>
Win
  • 61,100
  • 13
  • 102
  • 181
  • 1
    so in effect, i can read byte[] b = GetFromDatabase() and return the base64 directly as "data:image/png;base64," ++ base64 to the src attribute of an image. nice – Charles Okwuagwu Jul 03 '17 at 16:08
2

If you want to return images as base64 string you can do it like this:

public IHttpActionResult GetImage()
{
    var image = GetImageData();
    var base64 = Convert.ToBase64String(image);

    return Ok(base64);
}
Avshalom
  • 8,657
  • 1
  • 25
  • 43
ctyar
  • 931
  • 2
  • 10
  • 22
  • This won't compile. What is result? – juunas Jul 01 '17 at 11:13
  • @juunas my bad, fixed the code, you need to read the image data and simply pass it to Convert.ToBase64String – ctyar Jul 01 '17 at 11:17
  • I don't follow. How does this help? We need to return an image/png. you are just returning a string – Charles Okwuagwu Jul 01 '17 at 11:52
  • @CharlesOkwuagwu You said "base64 image String" if this is not what you need, I think your question needs some clarification – ctyar Jul 01 '17 at 12:10
  • 1
    @ShahriarGholami I've corrected the question. What i'm looking for is a way to serve content-type: image/png directly from data:image/png;base64,xxxx. I'm not just returning a string. thanks – Charles Okwuagwu Jul 01 '17 at 12:23