Question

So, I wrote a little Webserver. First, I tried to send only Text but now I’m also trying to send pictures. (or a html-Page which contains Pictures)

Here’s what I’ve tried:

if ((Path.GetExtension(filename).ToLower() == "jpg") || (Path.GetExtension(filename).ToLower() == "png") || (Path.GetExtension(filename).ToLower() == "gif"))
{
    Image image = Image.FromFile(filename);
    MemoryStream ms = new MemoryStream();
    image.Save(ms, image.RawFormat);
    responseContent = Encoding.Default.GetString(ms.ToArray());
    responseheader = "HTTP/1.1 200 OK\r\n" +
                     "Server: MiniWebServer\r\n" +
                     "Content-Length: " + responseContent.Length + "\r\n" +
                     "Content-Language: de\r\n" +
                     "Connection: close\r\n\r\n"; 
}

finalResponse = responseheader + responseContent;
return Encoding.ASCII.GetBytes(finalResponse);

So, I tried to open the html file (which contains a picture) in the browser but it doesn’t show up. Then, I tried to open only the picture in the Browser but then there appears an Error which says that the Graphics cannot be shown because it contains an error.

Answer 1

You encode everything as a string.

For the HTTP header, this is fine, because all browsers expect the header to readable this way and it must be encoded using ASCII as you do now.

If you’re sending text, it is also fine, because most browsers default to ASCII mode when you don’t specify what the content type is.

But for images and other data, following must happen in your response.

Set the Content Type header specifying the type of the content you’re sending.
examples would be

Content-Type: image/gif

or

Content-Type: image/png

Now the browser (or whatever that is receiving the content) knows what to expect. Except, you encoded your image in ASCII encoding.

ASCII is only for encoding simple test to bytes. (I say simple, because ASCII only supports very little set of characters. It doesn’t support things like multiple languages .etc. which Unicode, UTF and some other encodings does.)

This causes ASCII to read your image, as text, and strip out or corrupt the letters it doesn’t understand. (Which is most of your image data.)

What you want to do is, to send the rest of the response (image, after the header) in the format you specified in the Content-Type header. Simply send the result from ms.ToArray call.

Ideally, you will make sure the image is in the correct format you specified, and won’t depend on the file extension, but in reality, lot of servers lie about the content type and specify image/* and let the browser figure it out.

Here’s a good example on how to build a web server in C#.

Hope this helps.

---

On a side note, something your implementation is bad at, is memory consumption. You’re loading the entire image to memory using a memory stream, then copying it to an array. That’s 2 copies of the image in memory per request. I’m not sure how much scalability you want. But if you get 10 requests at the same time for a high resolution image (say 5 MB, for a typical photo taken by a 8MP camera ?), now your server suddenly loads 100 MB of data into memory.

This can become a larger problem if you’re accepting files from user and loading them to memory before writing to a file. If a user decides to upload a file of 1 GB, it will bring down your server. (I’ve seen this in action in some sites written with ASP.NET, and it is very bad. Fault is partly ASP.NET’s optimizations.)

What you can do is to open a file stream, and copy bytes to the response without loading the entire image. The above link shows the code for this.