How to create drag drop resize and rotate image control

Joined:	03/10/2016
Level:	Bronze
Points:	0

Points:	3

Joined:	18/12/2008
Level:	Gold
Points:	2921

Points:	4

Hi,

We can perform simple coding for rotating the images which we uploaded.
To demonstrate rotating images on a web page, we will need to create a simple website. At this point in the tutorial I have created a new ASP.NET Empty Web Site. Next, we will need to add an image to our project that we will use to display and rotate. For this I have created a sample image, but you can use any image you want to. To add it to the project:
1.Right click the project in your Solution Explorer.
2.Select Add Existing Item…
3.Select the Image file you want to add.
4.Click Add.

<h4><B>Adding the Default.aspx Page</B></h4>

What we need to do now is add in a Web Form with an image control and a button on it that we will use to view and rotate our image. To do this:
1.Right click the project in your Solution Explorer.
2.Select Add New Item…
3.Select a Web Form.
4.Name it Default.aspx.
5.Click Add.
6.Open Default.aspx up to Design mode.
7.Drag and drop an Image Control onto the Web Form.
8.In the Properties window, modify the Image Control's ImageUrl property by selecting the '…' button and choosing the image that we added to the project. In this case I have named mine tmpImage.gif and the ImageUrl is "~/tmpImage.gif".
9.Add a line break after the Image Control.
10.Drag and drop a Button Control underneath the Image Control

Then while clicking the button you can perform the following coding,


protected void Button1_Click(object sender, EventArgs e)
{
    //get the path to the image
    string path = Server.MapPath(Image1.ImageUrl);
 
    //create an image object from the image in that path
    System.Drawing.Image img = System.Drawing.Image.FromFile(path);
 
    //rotate the image
    img.RotateFlip(RotateFlipType.Rotate90FlipXY);
 
    //save the image out to the file
    img.Save(path);
 
    //release image file
    img.Dispose();
}

For Drop and Drag we can perform using the below code from the site.



http://www.codeproject.com/Tips/805778/Gesture-Drag-and-Drop-Resize-and-Rotate-Image-Csha

Thanks,
Mani

How to create drag drop resize and rotate image control

Email subscription

About dotnetspider.com

Quick Links

General

Services