Convert response to new Image

Question

Is there a way to convert a HTTP Get response into Image() object?

currently i use:

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

i want to use my web api (which serves 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;
            }

which i currently invoke via

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

When i test it in Postman i returns the response and renders the image.

I am trying to find out if its possible to convert that response and store it in the Image() object as per example.

does your method read the `.jpg` file and sent the stream as the respose to the client? — NiRUS, Apr 18 '17 at 11:53
i guess you dont need `http.get`. Just directly set the URL to the `img.src` like `img.src = "http://www.example.com/api/GetImage/my-id.jpg"` as you are setting all the reqired header values that tell the client that incoming respose is a file of jpg type — NiRUS, Apr 18 '17 at 11:59

score 1 · Accepted Answer · edited Apr 19 '17 at 01:31

1

You can return base64 value of your image:

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

example on client side:

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

example of 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;
}

edited Apr 19 '17 at 01:31

Aeseir

7,754
10
58
107

answered Apr 18 '17 at 11:55

i've expanded your answer to help others with complete picture (controller + client side) – Aeseir Apr 19 '17 at 01:31

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

Here is an example using setgetgo API that returns image based on ID

var img = new Image();
var generateImageId = () => Math.ceil(Math.random() * 100000);
img.src = "http://setgetgo.com/randomimage/get.php?key=" + generateImageId();
document.body.appendChild(img)

Working fiddler link

To save the image to disk checkout this SO answer

edited May 23 '17 at 12:02

Community

1
1

answered Apr 18 '17 at 12:27

NiRUS

3,901
2
24
50

Convert response to new Image

2 Answers2