Post
Ask Question

WebImage Helper in Web API

Introduction

In this article, you will see the use of the WebImage helper in the Web API. For using the WebImage helper we use the "System.Web.Helper" namespace. The WebImage helper is used for displaying and managing the image on the Web Page,.

The following are the properties of the WebImage  Helper:

  • FileName:  It gets and sets the file name to the object of the WebImage Helper.
  • ImageFormat: It Gets the format of the image, such as .jpg, .png, .jpeg
  • Height: Gets the height of the Image in pixels.
  • Width: Gets the width of the image in pixels.

The following are the methods of the WebImage Helper:

  • Resize: Its use for resizing the image.
  • RotateLeft: This method rotate the image to the left.
  • RotateRight: This method rotate the image to the right.
  • Clone: It copies the WebImage object.
  • Crop: It crops the image.

Let's see an example.

Step 1

Create a Web API application as in the following:

  • Start Visual Studio 2012.
  • From the Start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "Ok" button.

    Select MVC4 Web Application

  • From the "MVC4 Project" window select "Web API".

    Select Web API

  • Click on the "OK" button.

Step 2

Now select the "HomeController".

  • In the "Solution Explorer".
  • Expand the Controller folder.
  • Select the "HomeController".

    Select Controller

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Helpers;  
  6. using System.Web.Mvc;  
  7. namespace MvcApplication16.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         public void SelectPicture()  
  16.         {   
  17.             WebImage img = new WebImage("~/images/Image1.jpg");  
  18.             img.Resize(200,200);  
  19.             img.FileName= "Image1.jpg";  
  20.             img.Write();  
  21.         }  
  22.         public void SelectPicture1()  
  23.         {  
  24.             WebImage img = new WebImage("~/images/Image2.jpg");  
  25.             img.Resize(250, 250);  
  26.             img.FileName = "Image2.jpg";  
  27.             img.Write();  
  28.         }  
  29.         public void SelectPicture2()  
  30.         {  
  31.             WebImage img = new WebImage("~/images/Desert.jpg");  
  32.             img.Resize(200, 200);  
  33.             img.FileName = "Desert.jpg";  
  34.             img.RotateLeft();   
  35.             img.Write();  
  36.         }  
  37.     }  
  38. } 

Step 3

Now write some HTML code in the "index.cshtml" file. This file exists:

  • In the "Solution Explorer".

  • Expand "Views" folder.

  • Select "Home" -> "index.cshtml".

    Select Index View

Add the following code:

  1. <html>  
  2. <head>  
  3.     <title>Index</title>  
  4. </head>  
  5. <body>  
  6.     <div>  
  7.         <img src="@Url.Action("SelectPicture")" alt="" />  
  8.         <img src="@Url.Action("SelectPicture1")" alt="" />      
  9.         <img src="@Url.Action("SelectPicture2")" alt="" />  
  10.     </div>  
  11. </body>  
  12. </html> 

Step 4

Execute the application as in the following:

Output 


Similar Articles