Image Flipping Using ASP.NET(WebImage helper)

In last post we have seen how to rotate an image using asp.net. Today we will see how to flip an image in both vertically and horizontally. Horizontally means left to right just like mirror. Its like creating mirror image. Vertically means up to down. As we doing all in visual studio 2012 express for web you need to download it form http://www.microsoft.com/visualstudio/eng/downloads and install it.
Image Flipping Using ASP.NET(WebImage helper).png "Image Flipping 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.
Image Flipping Using ASP.NET(WebImage helper) 3)Add New Content Page(Razor v2) to website and name it as imageflip.cshtml.
Image Flipping Using ASP.NET(WebImage helper) 4)Right Click on your website and select Manage Nuget Packages.
Image Flipping Using ASP.NET(WebImage helper) 5)Search with keyword helper in top right search box, from the result install ASP.NET Web Helper Library
Image Flipping Using ASP.NET(WebImage helper) 6)Next step it will ask for Licence Acceptance, You have to click on I agree button.
Image Flipping Using ASP.NET(WebImage helper) 7)Now open your imageflip.cshtml and past the following code in it.

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

var imgpath = "";  
var oldimgpath = "";  
var f="";  
if(IsPost){  
f = Request.Form["f"];  
WebImage img = WebImage.GetImageFromRequest();  
var imgname = Path.GetFileName(img.FileName);  
oldimgpath = @"Uploads\o_" + imgname;  
img.Save(@"~\" + oldimgpath);  
imgpath= @"Uploads\" + imgname;  
if(f == "v"){  
img.FlipVertical();  
} 
else{  
img.FlipHorizontal();  
} 
img.Save(@"~\" + imgpath);  
} 
} 

<h1>Live Image Flipping</h1>  
@if(!IsPost){ 
<form action="" method="post" enctype="multipart/form-data">  
<input type="file" name="img" />  
<label>degrees:</label>  
<select name="f">  
<option value="v">Vertical Flip</option>  
<option value="h">Horizontal Flip</option>  
</select>  
<br/>  
<input type="submit" value="Submit" />  
</form>  
} 
@if (imgpath != "") 
{ 
<div class="result">  
<div style="float:left;margin-right:11px">  
<label>@if (f == "v") {  
<b>Vertical Fliped Image</b>  
} 
else{  
<b>Horizontal Fipped Image</b>  
} 
</label>  
<img src="@imgpath" />  
</div>  
<div style="float:left;margin-right:11px">  
<label>Old Image</label>  
<img src="@oldimgpath" />  
</div>  
</div>  
} 

8)The final output is as below.
Image Flipping Using ASP.NET(WebImage helper)1.png "Image Flipping Using ASP.NET(WebImage helper)") Image Flipping Using ASP.NET(WebImage helper)2.png "Image Flipping Using ASP.NET(WebImage helper)") Image Flipping Using ASP.NET(WebImage helper)3.png "Image Flipping Using ASP.NET(WebImage helper)")

Get posts by email

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