Friday, June 22, 2012

Crop Image in ASP.NET using JCrop, JQuery

You might have seen various websites and web application giving features to Crop your image and save it. That can be done in DHTML or in Javascript. Lets see one example of doing it with the help of JCrop which can be download from here (JCrop)



How to start

1. First include the following file into your project

  • jquery.Jcrop.js
  • jquery.Jcrop.min.js
  • jquery.min.js
or you can directly drag and drop the JCrop folder in your project

2. We need to write code in our page. Include the JQuery function in the page and also add one event for crop control for updation of the cordinates in the variable on selection by users. Check the head section of the page given below

                    <head runat="server">
                        <title></title>
                        <script src="js/jquery.min.js"></script>
                        <script src="js/jquery.Jcrop.min.js"></script>
                        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
                        <script language="Javascript">
                            jQuery(document).ready(function () {  
                                 // Create variables (in this scope) to hold the API and image size
        var jcrop_api, boundx, boundy;                              
                                $('#cropbox').Jcrop({
                                    onChange: updatePreview,
                                    onSelect: updatePreview,
                                    aspectRatio: 1,
                                    boxWidth: 450,
                                    boxHeight: 400,
                                    maxSize: [300, 300],
                                    minSize: [200, 200]
                                }, function () {
                                    // Use the API to get the real image size
                                    var width = $('#cropbox').width();
                                    var height = $('#cropbox').height();
                                    var rect = new Array();
                                    rect[0] = 1;
                                    rect[1] = 1;
                                    rect[2] = width - 1;
                                    rect[3] = height - 1;
                                    if (width >= 300) {
                                        rect[0] = width / 6;
                                        rect[2] = width - 100;
                                    }
                                    if (height >= 300) {
                                        rect[1] = 10;
                                        rect[3] = height - (height / 4);
                                    }
                                    var bounds = this.getBounds();
                                    boundx = bounds[0];
                                    boundy = bounds[1];
                                    // Store the API in the jcrop_api variable
                                    jcrop_api = this;
                                    jcrop_api.setSelect(rect);
                                });
                            });

                            function updatePreview(c) {
                                jQuery('#X').val(c.x);
                                jQuery('#Y').val(c.y);
                                jQuery('#W').val(c.w);
                                jQuery('#H').val(c.h);

                                if (parseInt(c.w) > 0) {
                                    var rx = 100 / c.w;
                                    var ry = 100 / c.h;

                                    $('#preview').css({
                                        width: Math.round(rx * boundx) + 'px',
                                        height: Math.round(ry * boundy) + 'px',
                                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                                    });
                                }
                            };                          
                        </script>
                    </head>
                

3. In your body section add following form to your page

                   
  <div>
<asp:button id="Submit" runat="server" text="Crop Image" onclick="Submit_Click" />
 
<asp:image id="cropedImage" runat="server" visible="False" />
 
<table>
<tr>
    <td>
        <div>
            <img src="Sunset.jpg" id="cropbox" />
        </div>
    </td>
    <td valign="middle">
        <div>
            <table>
                <tr>
                    <td class="headInnerLarger">
                        Thumbnail Preview:
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width: 100px; height: 100px; overflow: hidden;">
                            <img src="Sunset.jpg" id="preview" />
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>
</table>
<asp:hiddenfield id="X" runat="server" />
<asp:hiddenfield id="Y" runat="server" />
<asp:hiddenfield id="W" runat="server" />
<asp:hiddenfield id="H" runat="server" />
</div>
                

4. We need to handle the click event of crop button in our code and crop the image there

                
protected void Submit_Click(object sender, EventArgs e)
{
  if (this.IsPostBack)
  {
   //Get the Cordinates                
   int x = Convert.ToInt32(X.Value);
   int y = Convert.ToInt32(Y.Value);
   int w = Convert.ToInt32(W.Value);
   int h = Convert.ToInt32(H.Value);

   //Load the Image from the location
   System.Drawing.Image image = Bitmap.FromFile(
         HttpContext.Current.Request.PhysicalApplicationPath + "Sunset.jpg");
  
  //Create a new image from the specified location to                
  //specified height and width                
  Bitmap bmp = new Bitmap(w, h, image.PixelFormat);
  Graphics g = Graphics.FromImage(bmp);
  g.DrawImage(image, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), 
                     GraphicsUnit.Pixel);

  //Save the file and reload to the control
  bmp.Save(HttpContext.Current.Request.PhysicalApplicationPath + "Sunset2.jpg",          image.RawFormat);
  cropedImage.Visible = true;
  cropedImage.ImageUrl = ".\\Sunset2.jpg";
 }
}
             

Sunday, June 10, 2012

.Net Framework-Basics

Explain the .Net Framework.

The .Net framework allows infrastructural services to all the applications developed in .net compliant language. It is an engine that provides runtime services using its component like Common Runtime Language. It consists of two main components such as Common Language Runtime and Framework Class Library.

Difference between .Net 4.0 and .Net 3.5, 2.0

  • ControlRenderingCompatabilityVersion Setting in the Web.config File
  • ClientIDMode Changes
  • HtmlEncode and UrlEncode Now Encode Single Quotation Marks
  • ASP.NET Page (.aspx) Parser is Stricter
  • Browser Definition Files Updated
  • System.Web.Mobile.dll Removed from Root Web Configuration File
  • ASP.NET Request Validation
  • Default Hashing Algorithm Is Now HMACSHA256
  • Configuration Errors Related to New ASP.NET 4 Root Configuration
  • ASP.NET 4 Child Applications Fail to Start When Under ASP.NET 2.0 or ASP.NET 3.5 Applications
  • ASP.NET 4 Web Sites Fail to Start on Computers Where SharePoint Is Installed
  • The HttpRequest.FilePath Property No Longer Includes PathInfo Values
  • ASP.NET 2.0 Applications Might Generate HttpException Errors that Reference eurl.axd
  • Event Handlers Might Not Be Not Raised in a Default Document in IIS 7 or IIS 7.5 Integrated Mode Changes to the ASP.NET Code Access Security (CAS) Implementation
  • MembershipUser and Other Types in the System.Web.Security Namespace Have Been Moved
  • Output Caching Changes to Vary * HTTP Header
  • System.Web.Security Types for Passport are Obsolete
  • The MenuItem.PopOutImageUrl Property Fails to Render an Image in ASP.NET 4
  • Menu.StaticPopOutImageUrl and Menu.DynamicPopOutImageUrl Fail to Render Images When Paths Contain Backslashes
Link to find details of all the Major changes in .Net 4.0

Explain CLR (Common Language Runtime) and its functionalities?

Common Language Runtime (CLR) is the engine available in .Net Framework to compile and run the program. CLR engine does not compile the code in machine code but converts the code in a set of instructions called Microsoft Intermediate Language (MSIL). This MSIL is one of the section of Portable Executable (PE) file, the other being Metadata. PE file automatically get generated when you compile the program code.
The conversion of the program code to MSIL by CLR engine, makes .Net platform and language independent. Although at present, Microsoft does not have CLR engines for other platforms, in future you can find .Net application being compiled in UNIX or Linux operating system. After the conversion of the program code to MSIL, the code is then translated to native or machine code. Instead of compiling the program code at development time, the MSIL code gets translated 'just in time' (JIT) by JIT compilers.
CLR helps developers in managing both allocation and deallocation of memory. This removes two of the largest sources of programmer error: leaks and memory corruption.
CLR is also helpful for security purposes. CLR provide permissions to a component based on what process it runs in, validates the code based on evidence such as information about code at load time and the website from which component was obtained to assign permissions on a component-by-component basis. Moreover, CLR checks the code to see if it has been manipulated. The metadata in a CLR component can contain a digital signature that can be used to verify that the component was written by genuine person and that it has not been modified.

Explain the components of common language runtime.

  • Class Loader: is an abstract class. Its purpose is to tell JVM in what manner a class is to be loaded at runtime.
  • MSIL: Microsoft Intermediate Language is considered to be the lowest form of human readable language. It is CPU independent and includes instructions of how to load, store, initialize objects. JIT converts this MSIL into native code which is dependent on the CPU.
  • Code Manager: Is responsible for managing code at runtime.
  • Garbage Collector:The .NET garbage collector enables high-speed allocation and release of memory for the objects in managed code. Its main aim is proper memory management.
  • Security Engine:It ensures all the security restrictions.
  • Checker:Type It enforces the constraints of types. It enforces strictness in type checking.
  • Thread Support:It allows multithreading
  • Debug engine: It allows proper debugging of an application.
  • Base class library: It provides all the types that an application need at runtime.
  • Exception manager: Handles all the exception for an application during runtime.
  • COM Marshaller:It provides an option for interoperability for an application.