0

I am programmatically creating an image via C#, and I'm wondering how can I use this created image as a background of a div.

To explain it better, here's an example:

public string BackImage()
    {
        System.Drawing.Image img = //generated image goes here
        var ms = new MemoryStream();
        img.Save(ms, ImageFormat.Jpeg);
        return Convert.ToBase64String(ms.ToArray());
        //should I return it in a different way?
    }

This gives me the image that I can use, now how would I set this image to be a background of a div?

<div id="main">

</div>

I have tried using background-image:url(data:image/jpeg;base64,@Html.Action("BackImage"))" but the browser starts freezing because of the image.

Is there some simpler way of doing it?

Thanks.

master2080
  • 366
  • 3
  • 15
  • actually, dumping entire image blob into Data Protocol is not a good idea. have a look on [this discussion regarding the size limitation](https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations), i am not sure what is your browser, but it is possible the browser unable to deal with the base64 size. – Bagus Tesa May 31 '18 at 08:08
  • It's definintely the browser being unable to handle the base64 size. I'm just unsure of alternatives atm. – master2080 May 31 '18 at 08:12
  • You are saving your image in png format but then declaring the mime type as image/jpeg. Maybe try changing the mime type to image/png. – Johnathan Barclay May 31 '18 at 08:12
  • Edited the OP, those do match in my code. – master2080 May 31 '18 at 08:13

1 Answers1

1

Two ways:

Simple: Save your image in a temp folder and in your css class or style definition use background-image: url('whatevertheurlis')

A bit more complex: Create an IHttpHandler implementation to deliver the generated image. The css/style background-image setting is different only in the Url part.

I've done both before and the choice was based on the requirements of the number of different images to create and lifetime.

PepitoSh
  • 1,774
  • 14
  • 13
  • How do I save the image in a temp folder? The image is generated from user input, where do I store it? – master2080 May 31 '18 at 08:15
  • In my implementation I saved them in the "images" folder of the root of the application, so you can access by http(s)://domain/images/anytempname.jpg – PepitoSh May 31 '18 at 08:30
  • Saving them doesn't sound like a good idea since many users will be able to use this functionality at once, and the image isn't needed after a single display. – master2080 May 31 '18 at 08:32
  • 1
    This didn't come through from the OP. The IHttpHandler way still can be your friend. – PepitoSh May 31 '18 at 08:34
  • Can you explain a bit more what the IHttpHandler solution is about? – master2080 May 31 '18 at 08:57
  • Please see https://learn.microsoft.com/en-us/dotnet/api/system.web.ihttphandler?view=netframework-4.7 for details. – PepitoSh May 31 '18 at 09:44
  • I didn't mean what IHttpHander was, I was asking about what you meant for using it for generated images. – master2080 May 31 '18 at 09:51
  • With your own IHttpHandler implementation you can deliver images generated on the fly. A working example here: https://www.c-sharpcorner.com/UploadFile/dacca2/working-with-image-in-httphandler/ – PepitoSh May 31 '18 at 10:13