javascript - 将响应转换为新图像

Question

有没有办法将 HTTP Get 响应转换为 Image() 对象？

目前我使用:

backImage = new Image()
backImage.src = "http://www.example.com/someimage.jpg";

我想使用我的 Web api(提供 HttpResponseMessage):

public HttpResponseMessage GetImage(Guid id)
        {
           // my logic and image extraction
           var file = new FileInfo("path-to-my-image");
           var fileStream = file.OpenRead();
           var response = new HttpResponseMessage { Content = new StreamContent(fileStream) };
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpg");
                response.Content.Headers.ContentLength = file.Length;
                return response;
            }

我目前通过它调用

this.http.get("http://www.example.com/api/GetImage/"+id);

当我在 Postman 中测试它时，我返回响应并渲染图像。

我试图找出是否可以转换该响应并将其存储在 Image() 对象中，如示例所示。

Answer 1

您可以返回图像的 base64 值:

var returnString = "data:image/jpg;base64,"+Convert.ToBase64String(bytearray);

客户端示例:

this.http
 .get("http://www.example.com/api/GetImage/"+id)
 .then(x=>{
    backImage = new Image()
    backImage.src = x;
   //render
});

Controller 示例:

public object GetImage(Guid id)
{
  string base64String;

  Byte[] bytes = File.ReadAllBytes("path to filename"+id);
  base64String = Convert.ToBase64String(bytes);

  return "data:image/jpg;base64," + base64String;
}