Asp.net Convert Image To Base64

Asp.net Convert Image To Base64

In Asp.net, you can convert image into Bas64 character string. Here is a trick to convert image into Bas64. We will pass Base64 character string as a source to an Image. Trick can let you embed image in webpage.

Tutorial consists of FileUpload control. The instance of FileUpload control returns bytes content of uploaded image file. FileBytes is a property of FileUpload control which returns actual content in bytes.

.aspx Code.

<form id="form1" runat="server">
  <div>
      File
      <asp:FileUpload ID="FileUpload1" runat="server" />  
      <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
      <br />
      <img runat="server" id="myImage" src="" alt="Base64 Image in Asp.net." />
      <asp:Label ID="Label1" runat="server" Text="Message:"></asp:Label></div>
  </form>

Code Behind.

using System;
using System.Web;

public partial class ConvertImageToBase64_Demo : System.Web.UI.Page
{
  protected void Button1_Click(object sender, EventArgs e)
  {

    string filePath = Server.MapPath("uploads");
    string fileName = FileUpload1.FileName;

    byte[] imageBytes = FileUpload1.FileBytes;

    string base64ImageString = ConvertBytesToBase64(imageBytes);

    myImage.Src = "data:image/jpg;base64," + base64ImageString;

  }

  public string ConvertBytesToBase64(byte[] imageBytes)
  {
    return Convert.ToBase64String(imageBytes);
  }
}

Output of the generated image.

Base64 Image in Asp.net.

Asp.net base64 image format.

<img src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAAAgCAIAAADseKN/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAZFJREFUaEPtWTuuAjEMNAd8N+IInOBd4PVcgpaWkvJ13AAMBitygj2JFomVE22xn9mxJ2NnI9hcKfdg/ZmP1OLvtZ/Z/Kl/+j/rP/USkFp8e/3z90OL94uGW5wZIWz4P/V7M4BMahfme/0PZZyItq/0+YQvy1dU2JHo53HBmJqzqd9nFhIw+j/R7yvGX5UAmlCdN3PVY18E0KcinscO0x8yczIhpo4ud4wHff2vs3AubL8Q8aGFwI8EpkNDMiz0H2FGMGV0iasZHkqTnIRqexWsFaU1zycy+JHRb/rCRNQoch9hRjBKW2dYluGg/1rSdcPzI6PfX0eMfoQZwRjadynFBdnMHmFvYsL6H2Y2LyI8wf7H8W3YgVA/woxgPqu/qwO76h9hRjAL9L+Tt652vKiG63+XfoQZwSyw/vt5N7/A5QZjrP/ffdvN1gWPrs0i+XR8/8P93xHb/3X5L2CfGcHo7HN5Sr/wRED7v1D2KgBo9a1CzECSU/9zBoLuG5jaVbyS3X/QpPn7X+6/AKb/uf2/AQ4uolJqxvDEAAAAAElFTkSuQmCC" id="myImage" alt="Base64 Image in Asp.net." />

Summery: It’s very simple to convert bytes into Base64 character string using Convert.ToBase64String method provided in .net.

VB.net Code to generate Base64 image from bytes of image.

Imports System
Imports System.Web

Public Partial Class FileUploadDemo
	Inherits System.Web.UI.Page
	Protected Sub Button1_Click(sender As Object, e As EventArgs)

		Dim filePath As String = Server.MapPath("uploads")
		Dim fileName As String = FileUpload1.FileName

		Dim imageBytes As Byte() = FileUpload1.FileBytes

		Dim base64ImageString As String = ConvertBytesToBase64(imageBytes)

		myImage.Src = "data:image/jpg;base64," + base64ImageString

	End Sub

	Public Function ConvertBytesToBase64(imageBytes As Byte()) As String
		Return Convert.ToBase64String(imageBytes)
	End Function
End Class

Syntax For Embedding image in HTML 

The src tag of image should start with “data:image/jpg;base64, Actual_Base64_string_goes_here”

e.g. <img src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAAAgCAIAAADseKN/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiY
AAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAZFJREFUaEPtWTuuAjEMNAd8N+IInOBd4PVcgpaWkvJ13AAMBitygj2JFomVE22xn9mxJ2NnI9hcKfdg/ZmP1O
LvtZ/Z/Kl/+j/rP/USkFp8e/3z90OL94uGW5wZIWz4P/V7M4BMahfme/0PZZyItq/0+YQvy1dU2JHo53HBmJqzqd9nFhIw+j/R7yvGX5UAmlCdN3PVY18E0KcinscO0x8yc
zIhpo4ud4wHff2vs3AubL8Q8aGFwI8EpkNDMiz0H2FGMGV0iasZHkqTnIRqexWsFaU1zycy+JHRb/rCRNQoch9hRjBKW2dYluGg/1rSdcPzI6PfX0eMfoQZwRjadynFBdnM
HmFvYsL6H2Y2LyI8wf7H8W3YgVA/woxgPqu/qwO76h9hRjAL9L+Tt652vKiG63+XfoQZwSyw/vt5N7/A5QZjrP/ffdvN1gWPrs0i+XR8/8P93xHb/3X5L2CfGcHo7HN5Sr/
wRED7v1D2KgBo9a1CzECSU/9zBoLuG5jaVbyS3X/QpPn7X+6/AKb/uf2/AQ4uolJqxvDEAAAAAElFTkSuQmCC" id="myImage" alt="Base64 
Image in Asp.net." />

It will show ForLoop image. You can copy the image source and pate into browser address bar.

actual Image will render in browser.

Asp.net Convert Byte to Image

byte[] imageBytes = FileUpload1.FileBytes;

string base64ImageString = ConvertBytesToBase64(imageBytes);

Assume that you have byte array of image and you want to get the image from it. You can convert the byte to image or convert byte to Base64 string and embed it in HTML.

Tags:

Asp.net Convert String To Imageasp net image uploadASP net Write Text On Image C#.net and Vb.net programJquery image click eventHow to implement Captcha in Asp.netHow to check image is loaded using JQueryC# Convert String To DateTimeJQuery how to change background imageAsp.net Interview Questions for 2 years or 3 years experianceC# Binary To StringLinq Convert String Array To Int Array

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.