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

  • Question

  • User-1026236167 posted

    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();


    }


    }

    }
    }

    Friday, July 10, 2020 12:54 PM

Answers

All replies

  • User348806598 posted

    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/

    Friday, July 10, 2020 3:02 PM
  • User-1026236167 posted

    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>

    Saturday, July 11, 2020 6:06 AM
  • User348806598 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, July 11, 2020 3:58 PM
  • User-1026236167 posted

    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>

    Saturday, July 11, 2020 6:03 PM
  • User348806598 posted

    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-

    $("#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())
    })
    Sunday, July 12, 2020 6:18 AM