manually enter the base64code then clicked on button and display image?[Answered] RSS

• • Reply
  prabhjot1313

  Member

  55 Points

  191 Posts

  manually enter the base64code then clicked on button and display image?

  Jul 10, 2020 12:54 PM|prabhjot1313|LINK

  hello sir in my code i want to get the base64code  through image  when i insert or fill the base 64 code to the textbox then clicked on button here image should be display the base 64 code should be manually insert in the textbox then clicked on button and show image of related basecode

  but my code is run on the choose file control option  i dont want to select image this way 

  only fill the base64code in textbox and clicked on button then display image 

  here is my code

  please execute them

  aspx

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm75.aspx.cs" Inherits="WebApplication14.WebForm75" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  <asp:Content ID="Content3" ContentPlaceHolderID="contentbody" runat="server">
  
  <div style="margin-top:30px; margin-left:20px">
  
  
  <asp:FileUpload ID="FileUpload1" runat="server" />
  <br /><br />
  <asp:TextBox ID="TextBox1" runat="server" Height="146px" TextMode="MultiLine"></asp:TextBox>
  
  <%--<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" BackColor="#3366CC" BorderColor="#3366CC" ForeColor="White" />--%>
  <asp:Image ID="Image1" runat="server" Height="150px" Width="150px" />

  
  <asp:Button ID="Button2" runat="server" OnClick="BaseToImage_Click" Text="Base64 To Image" />

  </div>

  
  </asp:Content>

  css

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.IO;
  using System.Drawing;
  using System.Web.UI.WebControls;

  namespace WebApplication14
  {
  public partial class WebForm75 : System.Web.UI.Page
  {
  protected void Page_Load(object sender, EventArgs e)
  {
  if (!Page.IsPostBack)
  {

  }

  }

  
  static string base64String = null;

  public string ImageToBase64()
  {

  BinaryReader br = new BinaryReader(FileUpload1.PostedFile.InputStream);

  byte[] bytes = br.ReadBytes((int)FileUpload1.PostedFile.InputStream.Length);

  
  string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
  byte[] imageBytes = Convert.FromBase64String(base64String);
  base64String = Convert.ToBase64String(imageBytes);
  return base64String;

  
  }

  
  public System.Drawing.Image Base64ToImage()
  {
  byte[] imageBytes = Convert.FromBase64String(base64String);
  MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length);
  ms.Write(imageBytes, 0, imageBytes.Length);
  System.Drawing.Image image = System.Drawing.Image.FromStream(ms, true);
  return image;

  }
  protected void BaseToImage_Click(object sender, EventArgs e)
  {

  
  if (FileUpload1.HasFile)
  {
  Stream fs = FileUpload1.PostedFile.InputStream;
  BinaryReader br = new BinaryReader(fs);
  Byte[] byteImage = br.ReadBytes((Int32)fs.Length);
  string Base64string = Convert.ToBase64String(byteImage, 0, byteImage.Length);
  Image1.ImageUrl = @"data:image/png;base64," + Base64string;
  }

  TextBox1.Text = ImageToBase64();
  //TextBox1.Text = ImageToBase64();

  int status = 0;
  using (hospitalEntities ctx = new hospitalEntities())
  {
  ctx.test_image.Add(new test_image()
  {
  path = TextBox1.Text,
  by_whom = Session["username"].ToString(),

  });

  
  status = ctx.SaveChanges();

  
  }

  
  }

  }
  }

• • Reply
  asteranup

  All-Star

  20953 Points

  4984 Posts

  Re: manually enter the base64code then clicked on button and display image?

  Jul 10, 2020 03:02 PM|asteranup|LINK

  Hi,

  You can try this-

  <textarea id="base64"></textarea>
  <img id="myImage" />
  <button id="btn">
    Convert base 64 to image
  </button>

  $("#btn").on("click", () => {
  console.log($("#base64").val());
  	$("#myImage").attr("src", $("#base64").val())
  })
  

  You can use this URL to generate base 64 and test. https://www.base64-image.de/

  Thanks,
  Anup Das Gupta
  Visit My Blog
  You can also connect with me in LinkedIn
• • Reply
  prabhjot1313

  Member

  55 Points

  191 Posts

  Re: manually enter the base64code then clicked on button and display image?

  Jul 11, 2020 06:06 AM|prabhjot1313|LINK

  sir as you provide given code when i place base64 code on textbox and click on button image cannot shown

  
  <asp:TextBox ID="base64" runat="server" Height="146px" TextMode="MultiLine"></asp:TextBox>
  
  <asp:Image ID="myImage" runat="server" Height="150px" Width="150px" />
  
  <asp:Button ID="btn" runat="server" OnClick="BaseToImage_Click" Text="Base64 To Image" />
  
  <script type="text/javascript">

  $("#btn").on("click", () => {
  console.log($("#base64").val());
  $("#myImage").attr("src", $("#base64").val())
  })

  </script>

• • Reply
  asteranup

  All-Star

  20953 Points

  4984 Posts

  Re: manually enter the base64code then clicked on button and display image?

  Jul 11, 2020 03:58 PM|asteranup|LINK

  Try this sandbox here. From the sample copy the commented sample data and try in the textarea

  https://codesandbox.io/s/64bitimageencoding-btb9z

  Please check the generated HTML ids for your control.

  Thanks,
  Anup Das Gupta
  Visit My Blog
  You can also connect with me in LinkedIn
• • Reply
  prabhjot1313

  Member

  55 Points

  191 Posts

  Re: manually enter the base64code then clicked on button and display image?

  Jul 11, 2020 06:03 PM|prabhjot1313|LINK

  dear sir your code is run well but can you run this code with asp.net controls

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm76.aspx.cs" Inherits="WebApplication14.WebForm76" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  <asp:Content ID="Content3" ContentPlaceHolderID="contentbody" runat="server">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  data-integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  data-crossorigin="anonymous"></script>

  <%-- <textarea id="base64"></textarea>--%>
  <asp:TextBox ID="base64" runat="server" Height="146px" TextMode="MultiLine"></asp:TextBox>
  
  <%--<img src="" id="myImage" />--%>
  <asp:Image ID="myImage" runat="server" Height="150px" Width="150px" />
  <%--<button id="btn">click this</button>--%>
  <asp:Button ID="btn" runat="server" OnClick="BaseToImage_Click" Text="Base64 To Image" />

  <script>

  $("#btn").on("click", () => {
  console.log($("#base64").val());
  $("#myImage").attr("src", $("#base64").val())
  })
  </script>

• • Reply
  asteranup

  All-Star

  20953 Points

  4984 Posts

  Re: manually enter the base64code then clicked on button and display image?

  Jul 12, 2020 06:18 AM|asteranup|LINK

  Looks like the generated ids are different. This may happen if the code is inside an update panel or user control. You can solve this in two ways-

  prabhjot1313

  $("#btn").on("click", () => {
  console.log($("#base64").val());
  $("#myImage").attr("src", $("#base64").val())
  })

  $("[id*=btn]").on("click", () => {
  console.log($("[id*=base64]").val());
  $("[id*=myImage]").attr("src", $("[id*=base64]").val())
  })

  https://api.jquery.com/attribute-contains-selector/

  or you can use ClientId-

  $('#<%=btn.ClientID %>').on("click", () => {
  console.log($('#<%=base64.ClientID %>').val());
  $('#<%=myImage.ClientID %>').attr("src", $('#<%=base64.ClientID %>').val())
  })

  Thanks,
  Anup Das Gupta
  Visit My Blog
  You can also connect with me in LinkedIn