Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How We can Edit an Image using JavaScript .

Author: DevASP
Download Source Code : 576_ImageEditor.zip

This article is about how you can edit an image. In this application you can choose an image and you can modify the width, height, border, and add a tool tip.

Steps you will do.

 

Start visual studio and create a new web application.

 

Open the HTML design of you web form and add the following JavaScript functions before closing the head tag.

 

 

<script language="javascript">

function edit() {

picture = document.image.picture.value

width = document.image.width.value

height = document.image.height.value

border = document.image.border.value

tooltip = document.image.tooltip.value

document.pic.src = " " + picture + " "

document.pic.width = " " + width + " "

document.pic.height = " " + height + " "

document.pic.border = " " + border + " "

document.pic.alt = " " + tooltip + " "

}

</script>

 

 

Now add the following HTML code to design the layout of you web page an call the above JavaScript functions.

 

 

<body bgcolor=#009999>

<div style="text-align: center;">

<h2><u>Image Editor</u></h2>

<form name="image">

<h3>Properties:</h3>

<font face="Arial" size="3pt">File Name: <input type="file" name="picture" size="25"><br>

<br>

Width: <input type="text" name="width" size="10"><br>

<br>

Height: <input type="text" name="height" size="10"><br>

<br>

Border:</font> <input type="text" name="border" size="3"></font><br>

<br>

<font face="Arial" size="3pt">Tooltip: <input type="text" name="tooltip" size="15"></font><br>

<br>

<input type="button" value="Edit" onclick="edit();"> <input type="reset" value="Clear"><br>

</form>

<br>

<img name="pic"><br>

<font size="2pt">(Image will appear here)</font>

</div>

<center>

<h3>Dont forget to visit www.devasp.com<br>

<a href="http:\\www.devasp.com">www.devasp.com</a></h3>

</body>

 

 

This is all you will do. Now run your application and browse an image, give its height, width, border, tool tip and then click on edit button, the resultant image will be displays on the web page

 

 

 

 

 

 

 

 

 

Article Comments
hi

its

Really Good I like this CODE.

Keep it up

Thankx

Posted on 12/14/2006 12:45:04 AM by Kapil

How We can Edit an Image using JavaScript .

Posted on 4/6/2007 2:20:55 AM by Senthil Kumar

how we can edit the image using asp.net

Posted on 11/6/2008 11:40:18 PM by manikya prabhu

hi
how to login using form authentication using asp.net 2.0

Posted on 11/19/2008 2:59:33 AM by manik prabhu

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating Smart Images in ASP.NET.

Disclaimer - Privacy
© 2002-2017 DevASP.net