This tutorial will demonstrate how to rotate images in an ASP.NET Web Site using C#.
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:
- Right click the project in your Solution Explorer.
- Select Add Existing Item...
- Select the Image file you want to add.
- Click Add.
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
Adding the Default.aspx PageWhat 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:
- Right click the project in your Solution Explorer.
- Select Add New Item...
- Select a Web Form.
- Name it Default.aspx.
- Click Add.
- Open Default.aspx up to Design mode.
- Drag and drop an Image Control onto the Web Form.
- 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".
- Add a line break after the Image Control.
- Drag and drop a Button Control underneath the Image Control.
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Rotating the Image
Next, we need to add in some C# code that will actually rotate our image. What we are going to do here is load the image into memory, rotate it, and then overwrite the old image by saving the new rotated image in its place. Furthermore, we will want this functionality to take place when the button we added earlier is clicked. To do this:
- Double click the Button Control we added earlier to generate the button click event method and open the Default.aspx.cs code behind file for editing.
- At the top of the class we need to add the following using statement:
using System.Drawing;
- In the Button1_Click event method that was generated we need to add the following code:
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();
}
Let's review what this code is doing. First, we get the path to the image relative to our server and set that into a string named 'path'. We then create an Image object in memory that we will use to modify the image. We then call the built in rotate method, passing the parameter by which you want the image rotated. We then save the image and release the file once we are done working with it.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
Testing
To test this out and ensure that it is working, simply load up the web site and click the button to ensure the image is rotating. My image looks like this:
Then when the button is clicked -> 
<body> |
No comments:
Post a Comment