Save image with printed text on it

• Download source code - 5.9 KB 

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.