Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, August 29, 2014

jQuery Crop Image in Asp.net using Jcrop jQuery

jQuery Crop Image in Asp.net using Jcrop jQuery  and Upload to web Folder:



in this Post we describe cropping static image that is stored on web folder and save it into new folder. Here give gives an example by this we see how to cropping image in to asp.net. Here we use jQuery for cropping image and save in web. In the past post we saw how to upload image and crop uploaded image.
Now here we see how to perform cropping in saved image in asp.net.

Jcrop jQuery Plugin for cropping:

For crop image we need download a jquery form web for working with cropping oration by Jcrop jQuery Plugin download here 

Crop Image in Asp.net using Jcrop jQuery Plugin

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Crop Image using crop plugin</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.Jcrop.js" type="text/javascript"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function() {
        $('#imgcrop').Jcrop({
        onSelect: getcroparea
            });
        })

        function getcroparea(c) {
            $('#hdx').val(c.x);
            $('#hdy').val(c.y);
            $('#hdw').val(c.w);
            $('#hdh').val(c.h);
        };
    </script>
   
    <style type="text/css">
        #imgcrop
        {
            height291px;
            width479px;
        }
        #imgcropped
        {
            width186px;
            height202px;
        }
    </style>
   
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <br />


        <h1>Exampel of Image cropping in asp.net using JQuery. </h1>
        <p>crop and save in web server foulder:</p>
        <br />
        <img src="images/Arkady%20Ostrisky%20art.jpg" id="imgcrop" alt="sample image"/>
        <input type="hidden" id="hdx" runat="server" />
        <input type="hidden" id="hdy" runat="server"/>
        <input type="hidden" id="hdw" runat="server"/>
        <input type="hidden" id="hdh" runat="server" />
        <br />
        <br />
        <asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
        <br />
        <h2>Craped Image.</h2>
        <br />
        <img id="img_cropped" runat="server" visible="false" />
    </div>
    </form>
</body>
</html>

Crop Image in Asp.net using Jcrop jQuery C# code:

using System;
using System.Drawing;
using System.IO;
using Image = System.Drawing.Image;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btncrop_Click(object sender, EventArgs e)
    {
        try
        {
                string fname = "Arkady Ostrisky art.jpg";
                string fpath = Path.Combine(Server.MapPath("~/images"), fname);
                Image img = Image.FromFile(fpath);
                Rectangle cropcords = new Rectangle(
                Convert.ToInt32(hdx.Value),
                Convert.ToInt32(hdy.Value),
                Convert.ToInt32(hdw.Value),
                Convert.ToInt32(hdh.Value));
                string cf_name, cf_path;
                Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, img.PixelFormat);
                Graphics grph = Graphics.FromImage(bitMap);
                grph.DrawImage(img, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);
                cf_name = "crop_" + fname;
                cf_path = Path.Combine(Server.MapPath("~/cropimages"), cf_name);
                bitMap.Save(cf_path);
                img_cropped.Visible = true;
                img_cropped.Src = "~/cropimages/" + cf_name;
            }
            catch (Exception ex)
            {
                throw ex;
            }
    }
}


jQuery Crop Image in Asp.net using Jcrop jQuery

Download Full code : click here..

JQuery related Posts:


Asp.net Programming web server control Related Post :




    No comments:

    Post a Comment