Click here to Skip to main content
Click here to Skip to main content

Save image with printed text on it

, 25 Sep 2012
Rate this:
Please Sign up or sign in to vote.
Create an ASP.NET page where the user can edit/modify text for an image and then save that image with printed text on it.

Introduction

A few months back I had a requirement in ASP.NET in which I needed to edit/modify text for an image and then save that image with printed text on it. I searched a lot on the Internet but could not find a proper solution for it. After a lot of effort, I finally did it and decided to share this code publicly.

Background  

For the above requirement, I created a website named website1 in ASP.NET with C# as the programming language. I used SQL Server 2008 to save images so that they can be modified when required. Saving and loading images in the database on the web page are done through Stored Procedures.  

In the web page Default.aspx I added a DataGrid control to display images stored in the database table. Also images can be edited and deleted from the grid.  

You can download the source code also from the above link. The database schema is in the App_Code folder. 

Using the Code   

To fulfill the requirement I created an HTML table in the Default.aspx page. I displayed the image in the <td> tag. To add text on the image I put a label in the <td> tag.  

I did it in the following way:

<tr> 
<td style="background: url(images/Chrysanthemum.jpg) no-repeat;" 
    id="tdImage" runat="server"
    align="left" valign="top" colspan="2">
<asp:Label ID="lblImage" Height="100px" Width="700" 
    runat="server" Text="Hello"></asp:Label>
</td> 
</tr>

There are three textboxes on the webpage which reads the height, width of the image and the text to be displayed on the image. I used the FileUpload button to upload the image.

The details are stored in the database table 'Image' which is as follows:

CREATE TABLE [dbo].[Image](
[ID] [int] IDENTITY(1,1) NOT NULL,
[ImageName] [nvarchar](50) NULL,
[ImageTempName] [nvarchar](200) NULL,
[ImageGUID] [uniqueidentifier] NULL,
[ImageText] [nvarchar](50) NULL,
[IsDeleted] [bit] NULL,
CONSTRAINT [PK_Image] PRIMARY KEY CLUSTERED 
(
[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, 
  IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
END
GO

When the submit button is clicked, the image is saved in the database through a stored procedure 'spSaveImage'.

Here is the stored procedure:    

CREATE PROCEDURE [dbo].[spSaveImage]	
@ID int OUTPUT,
@ImageName nvarchar(50),
@ImageTempName nvarchar(200),
@ImageGUID uniqueidentifier,
@ImageText nvarchar(50),
@IsDeleted bit
AS
BEGIN
 If(@ID = 0)
 BEGIN
  insert into Image (ImageName, ImageTempName, ImageGUID, ImageText, IsDeleted)
  values
  @ImageName, @ImageTempName, @ImageGUID, @ImageText, @IsDeleted)
 END
 else if(@ID <> 0)
  BEGIN
   Update Image set
   ImageName = @ImageName,
   ImageTempName = @ImageTempName, ImageGUID = @ImageGUID,
   ImageText = @ImageText, IsDeleted = @IsDeleted
   where ID = @ID
  END
END

Code written for the Submit button click event:  

protected void btnSubmit_Click(object sender, EventArgs e)
{ 
    #region
    if (!(txt.Text.Equals("")))
    {
        lblImage.Text = txt.Text;
    }
    if (!(txtHeight.Text.Equals("")))
    {
        lblImage.Height = Convert.ToInt32(txtHeight.Text);
    }
    if (!(txtWidth.Text.Equals("")))
    { 
        lblImage.Width = Convert.ToInt32(txtWidth.Text);
    } 
    #endregion
    ImageCls cls = new ImageCls();
    Dictionary<string, string> ctrls = new Dictionary<string, string>();
    if (hdn.Value.Equals(""))
    {
        ctrls.Add("ID", "0");
        Guid ImageGuid = System.Guid.NewGuid();
        if (fuImage.HasFile)
        {
            #region
            string TargetFolder = Server.MapPath("images/");
            string ImageTempName = "Images." + 
               Convert.ToString(ImageGuid) + "." + fuImage.FileName;
            fuImage.SaveAs(Server.MapPath("images/") + ImageTempName);
            tdImage.Attributes.Add("style", "background:url(images/" + ImageTempName + ")"); 
            ctrls.Add("ImageName", fuImage.FileName);
            ctrls.Add("ImageTempName", ImageTempName);
            #endregion
        }
        else
        {
            ctrls.Add("ImageName", "");
            ctrls.Add("ImageTempName", "");
        }
        #region
        ctrls.Add("ImageGUID", Convert.ToString(ImageGuid));
        ctrls.Add("ImageText", txt.Text);
        ctrls.Add("IsDeleted", "False");
        cls.SaveImage(ctrls);
        LoadGrid();
        #endregion
    }
    else if (!(hdn.Value.Equals("")))
    {
        ctrls.Add("ID", hdn.Value);
        Guid ImageGuid = System.Guid.NewGuid();
        if (fuImage.HasFile)
        {
            #region
            string TargetFolder = Server.MapPath("images/");
            string ImageTempName = "Images." + 
              Convert.ToString(ImageGuid) + "." + fuImage.FileName;
            fuImage.SaveAs(Server.MapPath("images/") + ImageTempName);
            tdImage.Attributes.Add("style", "background:url(images/" + ImageTempName + ")"); 
            ctrls.Add("ImageName", fuImage.FileName);
            ctrls.Add("ImageTempName", ImageTempName);
            #endregion
        }
        else
        {
            ctrls.Add("ImageName", lblImageName.Text);
            ctrls.Add("ImageTempName", lblTempImageName.Text);
        }
        #region
        ctrls.Add("ImageGUID", Convert.ToString(ImageGuid));
        ctrls.Add("ImageText", txt.Text);
        ctrls.Add("IsDeleted", "False");
            cls.SaveImage(ctrls);
        LoadGrid();
        #endregion
    } 
    ClearControls();
    btnSubmit.Text = "Submit";
    hdn.Value = string.Empty;
}
private void ClearControls()
{ 
    txt.Text = string.Empty; txtHeight.Text = string.Empty; txtWidth.Text = string.Empty;
}

ImageCls is the class where I have defined the method SaveImage() to save the image details in the database.

public void SaveImage(Dictionary<string,> parameters)
{
    string cmdtxt = string.Empty;
    string cmdval = string.Empty;
    SqlCommand cmd = new SqlCommand("spSaveImage", mycon);
    cmd.CommandType = CommandType.StoredProcedure;

    for (int i = 0; i < parameters.Count; i++)
    {
        cmd.Parameters.AddWithValue("@" + 
          parameters.ElementAt(i).Key, parameters.ElementAt(i).Value);
    }
    cmd.Connection = mycon;
    if (mycon.State == ConnectionState.Closed)
    {
        mycon.Open();
    }
    cmd.ExecuteNonQuery();
    mycon.Close();
}

You can Edit and Delete the images from the DataGrid defined in the Default.aspx through the RowCommand of the grid. 

Points of Interest 

This article gives you a basic knowledge of working with DataGrids in ASP.NET, and using Stored Procedures in web forms.  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Sonali Agarwal
Web Developer Essential Solve LLC
India India
I am a Web developer, Project Manager. I am:
- Flexible, responsive, creative and enthusiastic.
- Ability to manage multiple initiatives with deadlines
- Willingness to pick up and develop new skills.
- Ability to balance a number of conflicting priorities and make decisions.
- Results oriented - focused on productive and high-yield activities.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 3 Pinmembersandeepkumarvemula11-Feb-13 22:49 
GeneralMy vote of 3 PinmemberNilesh Patil Kolhapur27-Sep-12 21:50 
GeneralRe: My vote of 3 PinmemberSonali Agarwal27-Sep-12 23:09 
thanks

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 25 Sep 2012
Article Copyright 2012 by Sonali Agarwal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid