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

Friday, August 29, 2014

jQuery Crop Image in using Jcrop jQuery

jQuery Crop Image in 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 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

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 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" "">

<html xmlns="">
    <title>jQuery Crop Image using crop plugin</title>
    <script type="text/javascript" src=""></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() {
        onSelect: getcroparea

        function getcroparea(c) {
    <style type="text/css">
    <form id="form1" runat="server">
    <div align="center">
        <br />

        <h1>Exampel of Image cropping in 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" />

Crop Image in 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)
                string fname = "Arkady Ostrisky art.jpg";
                string fpath = Path.Combine(Server.MapPath("~/images"), fname);
                Image img = Image.FromFile(fpath);
                Rectangle cropcords = new Rectangle(
                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);
                img_cropped.Visible = true;
                img_cropped.Src = "~/cropimages/" + cf_name;
            catch (Exception ex)
                throw ex;

jQuery Crop Image in using Jcrop jQuery

Download Full code : click here..

JQuery related Posts: Programming web server control Related Post :

    1 comment:

    1. Thanks for this helpful Blog.
      I used a WordPress plugin that I found interesting. So I would like to recommend it.
      The plugin helps me quickly create and customize images before inserting them in my blog post.
      Check at:
      It’s free.