Convert from Binary Data to an Image Control in ASP.NET

Convert from binary data to an image control in ASP.NET

Create a regular HTML img element like so:

<img runat="server" id="image" />

And in code behind do this:

image.src = "data:image/png;base64," + Convert.ToBase64String(imageBytes);

Where imageBytes is a byte[].

You are done. The image will be displayed.

How to convert Binary images and display it in Repeater?

read/retrieve the image stored in binary form from the sql server database and show in Repeater data control

bytes = (byte[])dt.Rows[i]["BookPic"];
                        base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

                        Image img = (Image)rptBooks.Controls[i].FindControl("ImgBookPic");
                        img.ImageUrl = "data:image/png;base64," + base64String;

Click http://www.webcodeexpert.com/2014/04/upload-and-save-image-in-binary-format.html

How to load image from binary data in Asp.Net?

After decoding as @Christophe Geers suggested
use

string encodedString = "your image data encoded as base 64 char array";
byte[] data = Convert.FromBase64String(encodedString);

Response.BinaryWrite(data);

maybe this can help more:
http://odetocode.com/articles/172.aspx

How to retrieve binary image from database using C# in ASP.NET

Here is a basic sample to load an image from database quickly and load into a html image source in ASP. Please tell me if it works for you ;-)

//Get byte array from image file in the database with basic query
SqlDataAdapter myAdapter1 = new SqlDataAdapter("Select [logo] FROM [dbo].[tblCompanyInfo]", GlobalUser.currentConnectionString);
DataTable dt = new DataTable();
myAdapter1.Fill(dt);

foreach (DataRow row in dt.Rows)
{
    // Get the byte array from image file
    byte[] imgBytes = (byte[]) row["logo"];

    // If you want convert to a bitmap file
    TypeConverter tc = TypeDescriptor.GetConverter(typeof(Bitmap));
    Bitmap MyBitmap = (Bitmap)tc.ConvertFrom(imgBytes);

    string imgString = Convert.ToBase64String(imgBytes);
    //Set the source with data:image/bmp
    imgLogoCompany.Src = String.Format("data:image/Bmp;base64,{0}\"", imgString);
}

Converting binary value to Bitmap image

Looks like a PNG image (it's a 100x100 transparent pixels only image). You could use the following function to convert this HEX string into a byte array and save it to a file:

class Program
{
    static void Main()
    {
        var data = "89504e470d0a1a0a0000000d4948445200000103000000cf0806000000f18cb4b00000000473424954080808087c086488000000097048597300000b1200000b1201d2dd7efc00000016744558744372656174696f6e2054696d650031322f32372f3131cce39cd90000002674455874536f667477617265005245534f5552434553204e4f54205553454420464f5220454e47494e45f6c2e0720000200049444154789cec9d779c5d5775efbffbf473fb748d7aefdd922c775bd84e6c638a1d20b4600831844e48422f2f24218440c80b2fe5250412420fa1d9e082255bb66cc956b7ba2c8d6634bddeb9fdb4bddf1fe76a2cd932312f8065657e9fcffd7c";
        var buffer = StringToByteArray(data);
        File.WriteAllBytes("test.png", buffer);
    }

    static byte[] StringToByteArray(string hex)
    {
        return Enumerable
            .Range(0, hex.Length)
            .Where(x => x % 2 == 0)
            .Select(x => Convert.ToByte(hex.Substring(x, 2), 16))
            .ToArray();
    }
}

If you want to display it dynamically in ASP.NET you could write a generic handler that will serve this image:

public class MyImage : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/png";
        var data = "89504e470d0a1a0a0000000d4948445200000103000000cf0806000000f18cb4b00000000473424954080808087c086488000000097048597300000b1200000b1201d2dd7efc00000016744558744372656174696f6e2054696d650031322f32372f3131cce39cd90000002674455874536f667477617265005245534f5552434553204e4f54205553454420464f5220454e47494e45f6c2e0720000200049444154789cec9d779c5d5775efbffbf473fb748d7aefdd922c775bd84e6c638a1d20b4600831844e48422f2f24218440c80b2fe5250412420fa1d9e082255bb66cc956b7ba2c8d6634bddeb9fdb4bddf1fe76a2cd932312f8065657e9fcffd7c";
        var buffer = StringToByteArray(data);
        context.Response.OutputStream.Write(buffer, 0, buffer.Length);
    }

    private byte[] StringToByteArray(string hex)
    {
        return Enumerable
            .Range(0, hex.Length)
            .Where(x => x % 2 == 0)
            .Select(x => Convert.ToByte(hex.Substring(x, 2), 16))
            .ToArray();
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

and in some web form where you want to display it you could use an image control pointing to this handler:

<asp:Image ID="img" runat="server" ImageUrl="~/MyImage.ashx" />

or a simple static <img> tag if you prefer:

<img src="<%= ResolveUrl("~/MyImage.ashx") %>" alt="Sample Image" />

Yet another possibility is to use the Data URI scheme (assuming your client browsers support it):

<img src="data:image/png;base64,<%= MyImageData() %>" alt="Sample Image" />

where the MyImageData function could be defined in your code behind:

public partial class _Default : System.Web.UI.Page
{
    protected string MyImageData()
    {
        var data = "89504e470d0a1a0a0000000d4948445200000103000000cf0806000000f18cb4b00000000473424954080808087c086488000000097048597300000b1200000b1201d2dd7efc00000016744558744372656174696f6e2054696d650031322f32372f3131cce39cd90000002674455874536f667477617265005245534f5552434553204e4f54205553454420464f5220454e47494e45f6c2e0720000200049444154789cec9d779c5d5775efbffbf473fb748d7aefdd922c775bd84e6c638a1d20b4600831844e48422f2f24218440c80b2fe5250412420fa1d9e082255bb66cc956b7ba2c8d6634bddeb9fdb4bddf1fe76a2cd932312f8065657e9fcffd7c";
        var buffer = StringToByteArray(data);
        return Convert.ToBase64String(buffer);
    }

    private byte[] StringToByteArray(string hex)
    {
        return Enumerable
            .Range(0, hex.Length)
            .Where(x => x % 2 == 0)
            .Select(x => Convert.ToByte(hex.Substring(x, 2), 16))
            .ToArray();
    }
}

Passing binary image to another page

My suggestion is as follows:

1. From the details, it seems that your image is stored as a blob(binary data) in database table.

2. Instead of fetching the blob(binarydata) and passing it to the next page, you can just pass the database ID to the next page.

3. On the next page, make an AJAX request to the .NET server side code (you can put this on page load) and fetch the blob based on the database ID received from the previous page.

4. Then display this image and load it in the HTML div or img tag using the javascript success callback of the ajax request.



By the way, it is recommended to always store images on a filesystem. If you can refactor your server side code to store the images in a directory structure - that would be ideal. It may take lot of changes to your code base.
If the images are not too big - you may continue with the existing approach with the solution I suggested. Generally, having large binary data in database tables - could in long term make the queries slower.

You may want to check how to set binary data fetched as an image and set it in html. Please check this link for details: Is it possible to put binary image data into html markup and then get the image displayed as usual in any browser?

---

Related Topics