Save background image as byte array using C# in ASP.Net

RichardS...

SOLVED CLOSED ACTIVE ANSWERED
User: RichardSa
Posted: on Apr 04, 2023 06:15 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 1454
Sample Code: Download

I want to save background image as byte because after user selects the background image he prefers from the DataList images, that background will be saved for the user to be using each time the user wants to create another ID card.

User does not have to be choosing the background image from the DataList every time he wants to create an ID card, since the background image of the ID card is already saved with the user's ID.

I don't know if that’s the right approach

Home.aspx

<div class="col-sm-10" style="margin-top: 2%; display: flex; width: 100%;">
    <div class="grid-corner" style="width: 100%; background-color: white; font-size: 9pt; margin: 0 auto;">
        <asp:DataList ID="TemplateList" runat="server" Width="100%" RepeatDirection="Horizontal" RepeatColumns="6" CellSpacing="3" RepeatLayout="Table" CssClass="row">
            <ItemTemplate>
                <asp:ImageButton ID="ImageButton1" CssClass="ImageButton" OnClick="OnBackgroundChange" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="150" BorderStyle="Solid" BorderWidth="1" />
            </ItemTemplate>
        </asp:DataList>
    </div>
</div>

Secondpage.aspx.cs

<div class="col-sm-6">
    <asp:Panel Class="print-contents" ID="pnlContents" runat="server">
        <div class="card" id="IDcard" runat="server" style="margin: 0 auto; width: 78%; height: 430px; border-radius: 10px; background-image: src();">
            <div class="row" runat="server" id="header" style="width: 100%; margin: 0 auto; margin-top: 2%;">
                <div class="col-2">
                    <asp:Image ID="Image2" ImageUrl="image.png" CssClass="idcardimg" AlternateText="logo" runat="server" Height="28" />
                </div>
                <div class="col-8">
                    <div style="float: inline-start;">
                        <div style="text-align: center;">
                            <asp:Label ID="lblName" runat="server" Text="Organization Name"></asp:Label>
                        </div>
                        <div style="text-align: center;">
                            <asp:Label ID="addresslbl" runat="server" Text="Contact Address"></asp:Label>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align: center;">
                <asp:Label ID="TypeLbl" runat="server" Text="ID Type"></asp:Label>
            </div>
            <div class="contained" runat="server" id="middle" style="margin-bottom: 3%; margin-top: 20%; margin: 0 auto; text-align: center;">
                <br />
                <div style="text-align: center; margin-top: 20%;">
                    <div style="text-align: center; margin-top: 20%;">
                        <asp:Image ID="Image1" runat="server" Width="80" Height="80" />
                    </div>
                    <div style="text-align: center; margin-top: 3%;">
                        <asp:Label ID="Namelbl" runat="server" Text="Holder's Name"></asp:Label>
                    </div>
                    <div style="text-align: center; margin-top: 3%;">
                        <asp:Label ID="DeptLbl" runat="server" Text="Title/Department"></asp:Label>
                    </div>
                </div>
            </div>
            <div class="row" runat="server" id="below" style="width: 100%; margin-top: 30%; vertical-align: bottom;">
                <div class="col-sm-5">
                    <div class="form-group" style="float: left; font-size: 5pt;">
                        <div class="input-group">
                            <asp:Label ID="permitID" runat="server" Text=""></asp:Label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7">
                    <div style="float: right; font-size: 5pt; vertical-align: bottom;">
                        <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" ImageAlign="Baseline" Style="position: relative; bottom: 0px; display: block;" Width="70" Height="70" />
                    </div>
                </div>
            </div>
        </div>
    </asp:Panel>
    <div style="margin: 0 auto; padding: 10px;">
        <asp:Button ID="PrintCard" runat="server" CssClass="btn navbar-btn" Text="Print ID Card" OnClientClick="return PrintPanel();" />
    </div>
</div>

Home.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetTemplate();
        TemplateList.DataSource = dt;
        TemplateList.DataBind();
    }
}
private DataTable GetTemplate()
{
    string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(connectionString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Data FROM TemplateTable WHERE ContentType = 'image/png'"))
        {
            using (SqlDataAdapter da = new SqlDataAdapter())
            {
                cmd.Connection = con;
                da.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    da.Fill(dt);

                    return dt;
                }
            }
        }
    }
}
protected void OnBackgroundChange(object sender, ImageClickEventArgs e)
{
    //Set the url of Image in string variable.
    string image = ((ImageButton)sender).ImageUrl;
    string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(connectionString))
    {
        // Insert statement.
        using (SqlCommand cmd = new SqlCommand("INSERT INTO DocTable (Uid, email, Name, CreatedBy, ImageUrl) VALUES (@Uid, @email, @Name, @CreatedBy, @ImageUrl)", con))
        {
            cmd.Parameters.AddWithValue("@Uid", labelid.Text.Trim());
            cmd.Parameters.AddWithValue("@email", user.Text.Trim());
            cmd.Parameters.AddWithValue("@Name", named.Text.Trim());
            cmd.Parameters.AddWithValue("@CreatedBy", createby.Text.Trim());
            cmd.Parameters.AddWithValue("@ImageUrl", image);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            Session["Imagebg"] = image;
            Response.Redirect("Page2.aspx");
        }
    }
}

Secondpage.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        if (Session["cardbgImage"] != null)
        {
            IDcard.Attributes.Add("style", string.Format("width: 100%; z-index: -1; background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),  url('{0}') center center no-repeat; background-size: contain;", GetImagePath()));
        }
    }
}
private string GetImagePath()
{
    string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    string imagePath = string.Empty;
    using (SqlConnection con = new SqlConnection(connectionString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT [ImageUrl] FROM [DocTable] Where ImageUrl=@ImageUrl", con))
        {
            cmd.Parameters.AddWithValue("@ImageUrl", Session["cardbgImage"]);
            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.Read())
            {
                string s = (string)dr["ImageUrl"];
                byte[] data = System.Text.Encoding.ASCII.GetBytes(s);
                imagePath = "data:image/jpeg;base64," + Convert.ToBase64String(data);
            }
            con.Close();
        }
    }
    return imagePath;
}

Download FREE API for Word, Excel and PDF in ASP.Net

AjayV

0 3

Reply
ANSWER
User: AjayV
Replied: on Apr 06, 2023 01:21 AM
Modified: on Apr 07, 2023 09:20 AM
Report

Hi RichardSa,

If you are using URL to display the image and converting it to base64

Then you need to use webclient to donwnload the URL string.

Please refer below sample.

HTML

CS Page

<asp:DataList ID="TemplateList" runat="server" Width="100%" RepeatDirection="Horizontal" RepeatColumns="6" CellSpacing="3" RepeatLayout="Table" CssClass="row">
    <ItemTemplate>
        <asp:ImageButton ID="ImageButton2" OnClick="OnBackgroundChange" runat="server" ImageUrl='<%#Eval("Url")%>' Height="50" BorderStyle="Solid" BorderWidth="1" />
    </ItemTemplate>
</asp:DataList>

Home Page

<head runat="server">
    <title></title>
    <script>
        function SetBackgroundImage(data) {
            var id = document.getElementById('IDcard')
            id.style = 'background-image: url("data:image/png;base64,' + data + '");background-repeat:no-repeat;background-size:cover';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="row" runat="server">
            <div class="col-sm-3">
                <div class="card">
                    <div class="card-body">
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card1" id="IDcard" runat="server">
                    <div class="row">
                        <div class="col-2">
                            <asp:Image ID="Image2" ImageUrl="image.png" AlternateText="logo" runat="server" Width="35" Height="30" />
                        </div>
                        <div class="col-8">
                            <span>
                                <div>
                                    <asp:Label ID="lblName" runat="server" Text="Organization Name"></asp:Label>
                                </div>
                                <div>
                                    <asp:Label ID="addresslbl" runat="server" Text="Contact Address"></asp:Label>
                                </div>
                            </span>
                        </div>
                    </div>
                    <div class="contained">
                        <br />
                        <div>
                            <div>
                                <asp:Image ID="Image1" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
                            </div>
                            <div>
                                <asp:Label ID="Namelbl" runat="server" Text="Holder's Name"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Label4" runat="server" Text="Title/Designation/Department"></asp:Label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="form-group">
                                <div class="input-group">
                                    <asp:Label ID="permitID" runat="server" Text=""></asp:Label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <div class="form-group">
                                <div class="input-group">
                                    <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="">
                    <div>
                        <label>Edit your permit</label>
                    </div>
                    <asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
                    <div class="input-group">
                        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                            PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
                        <div class="input-group-append">
                            <span class="input-group-text" id="ColorBtn" runat="server">
                                <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true"></span>
                            </span>
                        </div>
                    </div>
                    <asp:Label ID="Label3" runat="server">Label Color</asp:Label>
                    <div class="input-group">
                        <asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                        <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
                            PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ChangedAllColor" />
                        <div class="input-group-append">
                            <span class="input-group-text" id="BackColorBtn" runat="server">
                                <span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true"></span>
                            </span>
                        </div>
                    </div>
                    <asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
                    <div class="input-group">
                        <input type="text" class="fonts" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

Namespaces

CS Page

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

Home page

using System.Net;
using System.Configuration;
using System.Data.SqlClient;

Code

CS Page

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetTemplate();
        TemplateList.DataSource = dt;
        TemplateList.DataBind();
    }
}

protected void OnBackgroundChange(object sender, ImageClickEventArgs e)
{
    string image = ((ImageButton)sender).ImageUrl;
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Images2 (ImageUrl) VALUES (@ImageUrl)", con))
        {
            cmd.Parameters.AddWithValue("@ImageUrl", image);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            Session["Imagebg"] = image;
            Response.Redirect("Home.aspx");
        }
    }
}

private DataTable GetTemplate()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 5 Url FROM Images"))
        {
            using (SqlDataAdapter da = new SqlDataAdapter())
            {
                cmd.Connection = con;
                da.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    da.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

Home Page

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        if (Session["Imagebg"] != null)
        {
            string imagedata = GetImagePath(Session["Imagebg"].ToString());
            Session["Imagebg"] = null;
            Page.ClientScript.RegisterStartupScript(this.GetType(), "SetBackgroundImage", "SetBackgroundImage('" + imagedata + "');", true);
        }
    }
}

private string GetImagePath(string imageUrl)
{
    string connectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string base64image = string.Empty;
    using (SqlConnection con = new SqlConnection(connectionString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT [ImageUrl] FROM Images2 Where ImageUrl = @ImageUrl", con))
        {
            cmd.Parameters.AddWithValue("@ImageUrl", imageUrl);
            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.Read())
            {
                string s = (string)dr["ImageUrl"];
                WebClient client = new WebClient();
                byte[] img = client.DownloadData(s);
                base64image = Convert.ToBase64String(img);
            }
            con.Close();
        }
    }
    return base64image;
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Save background image as byte array using C# in ASP.Net

Company

Explore

Follow us

Contact Us