How to display image inside web form from byte array using C #

Question

This is my code, all it does is clear the web page and draw the image so that the rest of the form will disappear! I need to show the image inside the form.

This is my user control for displaying images:

protected void Page_Load(object sender, EventArgs e) { if (Session["ObjHoteles"] == null) { Label1.Text = "Por favor, primero seleccione un hotel para desplegar las fotos."; } else { if (!IsPostBack) { List<Byte[]> ArrayFotos = new List<Byte[]>(); string NombreDelHotel = ""; Hoteles Hotel1 = (Hoteles)Session["ObjHoteles"]; NombreDelHotel = Hotel1.NombreHotel; ArrayFotos = Persistencia.PersistenciaFotos.FotosDeHotel(NombreDelHotel); Session["CantFotos"] = ArrayFotos.Count(); Byte[] Foto = ArrayFotos[0]; Response.Buffer = true; Response.Clear(); Response.ContentType = "image/jpeg"; Response.Expires = 0; Response.BinaryWrite(Foto); Session["NumFoto"] = 0; } else { List<Byte[]> ArrayFotos = new List<Byte[]>(); string NombreDelHotel = ""; Hoteles Hotel1 = (Hoteles)Session["ObjHoteles"]; NombreDelHotel = Hotel1.NombreHotel; ArrayFotos = Persistencia.PersistenciaFotos.FotosDeHotel(NombreDelHotel); Session["CantFotos"] = ArrayFotos.Count(); Byte[] Foto = ArrayFotos[(int)Session["NumFoto"]]; Response.Buffer = true; Response.Clear(); Response.ContentType = "image/jpeg"; Response.Expires = 0; Response.BinaryWrite(Foto); } } 

I need to find a way that does not clear the whole page, just draw an image inside the user control.

Answer 1

You can write an .aspx page or a handler, possibly .ashx, that sends the contents of the image back to the browser. You can pass information in the URL. Then use the URL of this page using the html tag or html control to display it.

EDIT: You need to use a control. You can convert the binary data to base64 and output the content to an html page.

I will give you an example with the img html tag:

 <img alt="" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAsMAAAGhCAIAAAALOi7ZAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QgLEhM6PUSGrwAAIABJREFUeNq8vcuSLEmWHKZ6jnlEZt5761Z3T/eAHAICAYRcEALsuOCWPzbzDfwP/gKXWJACoRDCBSkEBgPhADKY7qnu+4wIdztHuThmHh55q2t6ho+SlpaqyMwID3ez89CjqsY//dM//bM/+zMc/pGE3//PT/z09/1I0t/1Rz/x+o9+0I++vv/n8fU/8MW/9U9+9JVvL/v/u1cy86cv5ttfePXKq//8fTfhp+/qT3/oq8v+6V/+Ay/v25/+4X/46nqO"/> 

You can also use base64 encoding for an image with CSS:

 background-image: url(data:image/jpeg;base64,IVB) 

To convert to base64 with C # you can use:

 using System; 

and

 Convert.ToBase64String(Foto); 

Answer 2

There is another easy way:

• On the .aspx page:

   <asp:Image id="Image1" runat="server"></asp:Image> 

• Then in the CodeBehind .aspx.cs file:

   Image1.ImageUrl = "data:image/jpeg;base64," + Convert.ToBase64String(Foto) 

Answer 3

Response.Clear(); deletes all buffer content (i.e. everything on your page).

Instead of a user control to display a dynamic image, consider an HTTP handler ( .ashx ), for example:

ImageHandler.ashx:

 public class ImageHandler : System.Web.IHttpHandler { public void ProcessRequest(HttpContext context) { // Logic to get byte array here byte[] buffer = WhateverLogicNeeded; context.Response.ContentType = "image/jpeg"; context.Response.OutputStream.Write(buffer, 0, buffer.Length); } public bool IsReusable { get { return false; } } } 

Then on the .aspx page:

 <asp:Image ID="image1" runat="server" ImageUrl="~/ImageHandler.ashx" /> 

Note. If you need a specific image, you can pass a query string (such as an image identifier) ​​to the handler and have a logical byte array account to use the query string value.