how to change background of an image dynamically in C#

Question

1.00/5 (1 vote)

See more:

Hi ,

I have a well designed image which is named as MainImage. Now when I upload a new image using fileupload control(image will be passport photo size copy type) ,here on button click I want to make new image(uploaded image) slightly transparent on the top of MainImage (here MainImage acts as background for the uploaded image) and should be stored in db.

My form looks as below

Name : TextBox

Date : TextBox

Upload Image : fileuploadcontrol browse

Button

Please let me know how do I do it in c#. Thank you!

Posted 15-Jul-15 0:22am

raviram123

Updated 16-Jul-15 2:07am

v2

Add a Solution

Comments

Andy Lanng 15-Jul-15 6:34am

Please explain what you mean by "merged with MainImage". Do you want to actually merge the images or just have one image slightly transparent on top of the other image?

raviram123 15-Jul-15 12:33pm

sir when i click on file upload ctrl ie browse some images in folder wil appear and when i selected it i want to edit the image like crop,inserting another image in it, i want to write text any where

raviram123 16-Jul-15 8:06am

I want to make new image(uploaded image) slightly transparent on the top of MainImage and save in db

SohaibX 15-Jul-15 11:24am

It'll be a lot more easier if you just post the relevant code of yours.

raviram123 15-Jul-15 12:27pm

sir this the code below
.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload site.aspx.cs" Inherits="upload_site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<%-- <style type="text/css">
.auto-style1 {
width: 647px;
background-color: #00FF00;
}
.auto-style2 {
height: 323px;
width: 406px;
color: #FF0066;
background-color: #0066FF;
}
/*.auto-style3 {
color: #000000;
background-color: #FFFF99;*/
}
.auto-style4 {
width: 407px;
color: #00FF00;
height: 320px;
}
</style>--%>
<style type="text/css">
#Form1 {
width: 743px;
background-color: #33CCFF;
height: 388px;
}
.auto-style2 {
color: #FF33CC;
height: 387px;
width: 749px;
}
.auto-style3 {
color: #0000FF;
}
.auto-style4 {
background-color: #0000FF;
}
.auto-style5 {
background-color: #0000FF;
color: #FFFFFF;
}
.auto-style6 {
color: #CC3300;
}
.auto-style7 {
color: #FFFFFF;
background-color: #0000FF;
}
.auto-style8 {
color: #FFFFFF;
background-color: #0000FF;
}
.auto-style9 {
color: #FFFFFF;
}
</style>
</head>
<body>
<form id="Form1" runat="server" class="auto-style4">
<table border="0" color:"blue" cellspacing="5" cellpadding="5" class="auto-style2">
<tbody><tr>
<td class="auto-style1">
<span class="auto-style9">ID</span><span class="auto-style3">        </span>
<asp:TextBox ID="TextBox1" runat="server" CssClass="auto-style3">
<span class="auto-style3">
<asp:Label ID="Label1" runat="server" CssClass="auto-style4" ForeColor="#FFFFCC" Text="ADD/DEL">

<asp:CheckBox ID="Add" runat="server" Text="ADD" CssClass="auto-style7" />

<asp:CheckBox ID="Delete" runat="server" Text="DEL" CssClass="auto-style8" />
          </span>
<asp:Button ID="Button2" runat="server" CssClass="auto-style5" Height="23px" OnClick="Button2_Click" Text="GO" Width="58px" />
</td>
</tr>
<tr>
<td class="auto-style1">
<span class="auto-style9">name</span><span class="auto-style3">    </span> <asp:TextBox ID="TextBox2" runat="server" CssClass="auto-style3">
<span class="auto-style3">
<br />
<br />
</span>
<span class="auto-style9">
date</span><span class="auto-style3">      </span>
<asp:TextBox ID="TextBox3" runat="server" CssClass="auto-style3">
</td>
</tr>
<tr>
<td class="auto-style1">
<span class="auto-style9">image</span><span class="auto-style6"> </span>
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="auto-style3" />
<asp:Label ID="lblStatus" runat="server" CssClass="auto-style3">

raviram123 15-Jul-15 12:29pm

sir this the .aspx.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.IO;

public partial class upload_site : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
if (Add.Checked == true)
{
try
{
string CS = "Data Source=HOME;Initial Catalog=Registration;Integrated Security=True";
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand();
//string filename = FileUpload1.FileName;
string pc = FileUpload1.FileName;
//FileUpload1.PostedFile.SaveAs(Server.MapPath(@"~\Upload\"));
FileUpload1.PostedFile.SaveAs(Server.MapPath(@"~\Upload\" + pc.Trim()));
// string path = @"~\Upload\" + filename.Trim();
//string path = @"~\Upload\";
cmd = new SqlCommand("insert into imagepath(ID,ImageName,CurrentDate,pc)values('" + TextBox1.Text + "','" +TextBox2.Text + "','" + TextBox3.Text + "','" + pc + "')", con);
cmd.CommandType = CommandType.Text;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
lblStatus.Text = " Uploaded Successfully ";
}
}
catch
{
lblStatus.Text = "Please try again later!";
}

}
else if (Delete.Checked == true)
{
string CS = "Data Source=HOME;Initial Catalog=Registration;Integrated Security=True";
SqlConnection con = new SqlConnection(CS);
SqlCommand cmd = new SqlCommand("delete from imagepath where ID='" + TextBox1.Text + "'", con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
lblStatus.Text = " deleted successfully ";

}

}

protected void Button2_Click(object sender, EventArgs e)
{
Response.Redirect("separate.aspx");
}
}

raviram123 16-Jul-15 0:32am

sir u have sent the code for file upload,what i want is when uploading only i want to edit and upload to database

SohaibX 15-Jul-15 12:51pm

so you want to upload an image file and then show it in an <image> tag. (which apparently you are missing).?

SohaibX 16-Jul-15 5:41am

"i want to edit and upload to database". You can save the image path in database. Which I think you already doing. Whats the problem and what you mean by "Edit"?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

SohaibX · Answer 1 · 2015-07-15T07:03:00

First you need to place an Image element (tag) in your aspx page.

<asp:image id="Image1" runat="server" xmlns:asp="#unknown" />

after you uploaded your image file successfully. You need to assign this image URL to that image element.

(imageElementID).ImageURL="../Upload/"+pc.Trim();

And also, you need to check the directory whether its exists or not before save file into it. so it'll be something like.

if(!Directory.Exists(Server.MapPath(@"~/Upload")))
        Directory.CreateDirectory(Server.MapPath(@"~/Upload"));
    FileUpload1.PostedFile.SaveAs(Server.MapPath(@"~/Upload/" + pc.Trim()));

does that solve your problem?