Display a generated gif;base64 image using C# code behind in img using JavaScript

Question

i have the following C# code behind (it is a code that generate dynamically an Bmp image and than convert it to gif and returns it to be displayed) :

[WebMethod]
public static HtmlImage ProcessIT()
{
var bitmap = DrawingMethod(); //Method that draws dynamically Bmp Image 
MemoryStream ms = new MemoryStream();
bitmap.Save(ms, ImageFormat.Jpeg);
var base64Data = Convert.ToBase64String(ms.ToArray());
HtmlImage img = new HtmlImage 
{Src = "data:image/gif;base64," + base64Data, Width = 940};
return img; //The Gif image i want to display on the page
}

Than, I'm calling this C# behind code Method from : Generate_onclick() which is a JavaScript

function Generate_onclick() 
{
  PageMethods.ProcessIT(onSucess, onError);
   function onSucess(result) 
    {
     //Here is where i am not sure how it's done !!!!!!
     document.getElementById("imgCtrl").src = result; 
    }

   function onError(result) 
    {
      alert('Something wrong.');
    }
}

in here is the HTML Code :

<img src="" alt="" style="width: 100%;" runat="server" id="imgCtrl" />

is this the right way to display my image in the page ? if not than how ?

Answer 1

This is untested but I believe it should work. The point here is that if you want to continue with what you have you will want to return the base64 string and set the source of the html element to that string not to an html image object.

[WebMethod]
public static string ProcessIT()
{
var bitmap = DrawingMethod(); //Method that draws dynamically Bmp Image 
MemoryStream ms = new MemoryStream();
bitmap.Save(ms, ImageFormat.Jpeg);
var base64Data = Convert.ToBase64String(ms.ToArray());
string img = "data:image/gif;base64," + base64Data;
return img; //The Gif image i want to display on the page
}