Live Image Rotating Using ASP.NET(WebImage helper)

If you took some Photos from your mobile, and you want to rotate your photos, what would you do? Probably you would open any photo editing tools like Photoshop, load you photo in it and rotate it using avail tools.
Today I will show you how to do this task using programming. Ya! we will use asp.net web application to do this task. Again we are using WebImage helper to do this(see here for previous articles). If you not yet installed visual studio 2012 please download it form http://www.microsoft.com/visualstudio/eng/downloads.
Live Image Rotating Using ASP.NET(WebImage helper).png "Live Image Rotating Using ASP.NET(WebImage helper)") I am assuming you have installed Visual studio Express for web 2012. Now follow the following steps. 1)Open your VS Express For Web(go all programs search for vs express for web).
2)Create a New Web Site Under File Menu.
Live Image Rotating Using ASP.NET(WebImage helper) 3)Add New Content Page(Razor v2) to website and name it as imagerotate.cshtml.
Live Image Rotating Using ASP.NET(WebImage helper) 4)Right Click on your website and select Manage Nuget Packages.
Live Image Rotating Using ASP.NET(WebImage helper) 5)Search with keyword helper in top right search box, from the result install ASP.NET Web Helper Library
Live Image Rotating Using ASP.NET(WebImage helper) 6)Next step it will ask for Licence Acceptance, You have to click on I agree button.
Live Image Rotating Using ASP.NET(WebImage helper) 7)Now copy and past the following code in imagerotate.cshtml

@{ 
Page.Title = "Live Image Rotating using asp.net";  
Layout = "~/_SiteLayout.cshtml"; 

var imgpath = "";  
var oldimgpath = "";  
if(IsPost){  
var r = Request.Form["r"];  
WebImage img = WebImage.GetImageFromRequest();  
var imgname = Path.GetFileName(img.FileName);  
oldimgpath = @"Uploads\o_" + imgname;  
img.Save(@"~\" + oldimgpath);  
imgpath= @"Uploads\" + imgname;  
if(r == "l"){  
img.RotateLeft();  
} 
else{  
img.RotateRight();  
} 
img.Save(@"~\" + imgpath);  
} 
} 
<!DOCTYPE html>  
<html>  
<head>  
<title>Live Image Rotating</title>  
</head>  
<body>  
<h1>Live Image Rotating</h1>  
@if(!IsPost){ 
<form action="" method="post" enctype="multipart/form-data">  
<input type="file" name="img" />  
<label>degrees:</label>  
<select name="r">  
<option value="l">Rotate Left</option>  
<option value="r">Rotate Right</option>  
</select>  
<br/>  
<input type="submit" value="Submit" />  
</form>  
} 
@if (imgpath != "") 
{ 
<div class="result">  
<div style="float:left;margin-right:11px">  
<label>New Image</label>  
<img src="@imgpath" />  
</div>  
<div style="float:left;margin-right:11px">  
<label>Old Image</label>  
<img src="@oldimgpath" />  
</div>  
</div>  
} 
</body>  
</html> 

8)Now open this page in your web browser, you should get your output as below.
Live Image Rotating Using ASP.NET(WebImage helper)1.png "Live Image Rotating Using ASP.NET(WebImage helper)") Live Image Rotating Using ASP.NET(WebImage helper)2.png "Live Image Rotating Using ASP.NET(WebImage helper)")

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.