locked
image cannot display of related base64code? RRS feed

  • Question

  • User-1026236167 posted

    hello sir here in my code when i choose image from fileupload then click on button imagetobase64 so base 64 code generated when i copy this code and place on the next

    base64 textbox then click button base64to image so image cannot display in the image box 

    here is my code 

    please solve them

    cs

    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;
    using System.Net;
    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;

    }

    protected void loadimage(object sender, EventArgs e)
    {

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

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


    }

    }

    }
    }

    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">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    data-integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    data-crossorigin="anonymous"></script>

    <div style="margin-top:30px; margin-left:20px">

    <asp:FileUpload ID="FileUpload1" runat="server" /><br /><br />
    <asp:TextBox ID="TextBox1" Height="150px" runat="server" TextMode="MultiLine"></asp:TextBox>


    <br />

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


    </div>

    <div style="margin-left:350px; margin-top:-185px" >
    <asp:TextBox ID="base64" runat="server" Height="150px" TextMode="MultiLine"></asp:TextBox><br />
    <asp:Button ID="btn" runat="server" Text="Base64 to image" OnClientClick="loadimage(); return false;" /><br />
    <asp:Image ID="myImage" runat="server" Height="150px" Style="margin-left:250px; margin-top:-235px" Width="150px"/>

    <script type="text/javascript">
    function loadimage() {
    $('#<%= myImage.ClientID %>').attr('src', $('#<%= base64.ClientID %>').val());
    }
    </script>

    </div>

    </asp:Content>

    Monday, July 13, 2020 6:13 AM

Answers

  • User-939850651 posted

    Hi prabhjot1313,

    You did not set the corresponding value for the TextBox named base64, then the control used to display the image will not get the correct url property.

    I created a demo and used code you provided, I modified part of code and achieve it. Please refer to below code:

    <head runat="server">
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <title></title>
            <script type="text/javascript">
                function loadimage() {
                    $('#<%= myImage.ClientID %>').attr('src', "data:image/png;base64,"+$('#<%= TextBox1.ClientID %>').val());
                }
            </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:TextBox ID="TextBox1" Height="150px" runat="server" TextMode="MultiLine"></asp:TextBox><br />
    <br />
    <br />
    <asp:Button ID="Button2" runat="server" OnClick="BaseToImage_Click" Text="Image to base64" /><br />
    <br />
    <%-- <asp:TextBox ID="base64" runat="server" Visible="false" Height="150px" TextMode="MultiLine"></asp:TextBox>--%>
    <br />
    <br />
    <asp:Button ID="btn" runat="server" Text="Base64 to image" OnClientClick="loadimage();return false;" /><br />
    <asp:Image ID="myImage" runat="server" Height="150px" Style="margin-left: 250px; margin-top: -235px" Width="150px" />
    </div>
    </form>
    </body>
    using System;
    using System.IO;
    using System.Web.UI;
    
    namespace Demo
    {
        public partial class ShowImage : Page
        {
            public static string base64String = null;
            public static string fileName = null;
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            public string ImageToBase64()
            {
                fileName = FileUpload1.PostedFile.FileName;
                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;
            }
    
            protected void BaseToImage_Click(object sender, EventArgs e)
            {
                TextBox1.Text = ImageToBase64();
            }
        }
    }

    Result:

    You could also refer to these cases:

    Convert an Image to Base64 String and Base64 String to Image

    ASP.NET C# Binding Images to GridView from Database

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 13, 2020 9:05 AM