Encrypt and Decrypt Data using Asp.net

Here In code base64 Encryption and Decryption in done.

Simple example I am showing you to make understand.

Example.

In .aspx page

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<asp:Button ID="btnencrypt" runat="server" Text="Encrypt" /> <asp:Button ID="btndecrypt" runat="server" Text="Decrypt" />

<br />

<asp:Label ID="Lblencrypt" runat="server" ></asp:Label>

<br />

<asp:Label ID="Lbldecrypt" runat="server" ></asp:Label>

For Encryption.

.vb

Protected Sub btnencrypt_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnencrypt.Click

        Dim data As String = TextBox1.Text

        Dim encData_byte As Byte() = New Byte(data.Length - 1) {}

        encData_byte = System.Text.Encoding.UTF8.GetBytes(data)

        Dim encodedData As String =              Convert.ToBase64String(encData_byte)

        Lblencrypt.Text = encodedData.ToString()

    End Sub

.C#

protected void btnencrypt_Click(object sender,System.EventArgs e)
{
string data = TextBox1.Text;
byte[] encData_byte = new byte[data.Length];
encData_byte = System.Text.Encoding.UTF8.GetBytes(data);
string encodedData = Convert.ToBase64String(encData_byte);
Lblencrypt.Text = encodedData.ToString();
}

For Decryption.

.vb

Protected Sub btndecrypt_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btndecrypt.Click

        Dim encoder As New System.Text.UTF8Encoding()

        Dim utf8Decode As System.Text.Decoder = encoder.GetDecoder()

        Dim todecode_byte As Byte() = Convert.FromBase64String(Lblencrypt.Text)

        Dim charCount As Integer = utf8Decode.GetCharCount(todecode_byte, 0, todecode_byte.Length)

        Dim decoded_char As Char() = New Char(charCount - 1) {}

        utf8Decode.GetChars(todecode_byte, 0, todecode_byte.Length, decoded_char, 0)

        Dim result As String = New [String](decoded_char)

        Lbldecrypt.Text = result.ToString()

 End Sub


.C#

protected void btndecrypt_Click(object sender,System.EventArgs e)
{
System.Text.UTF8Encoding encoder = new System.Text.UTF8Encoding();
System.Text.Decoder utf8Decode = encoder.GetDecoder();


byte[] todecode_byte = Convert.FromBase64String(Lblencrypt.Text);
int charCount = utf8Decode.GetCharCount(todecode_byte, 0, todecode_byte.Length);
char[] decoded_char = new char[charCount];
utf8Decode.GetChars(todecode_byte, 0, todecode_byte.Length, decoded_char, 0);
string result = new String(decoded_char);
Lbldecrypt.Text = result.ToString();
}

Result

Set Data Dynamically in Treeview Menu Control

I have used XML file to set data into Treeview control dynamically

Data is fetch from database category and subcategory

XMLFile.xml is a file i have taken in page and set it with XmlDataSource DataFile.

Here xml file is empty, it get fill after execution.

Green color text Fetch data from (catname or productname) from xml file.

Black color text set datamember with tag name.

 eg.

<Cagtegory catname="abc"/>

<product productname="pqr"/>

Code:

In aspx page

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="XMLFile.xml"></asp:XmlDataSource>

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1"
CssClass="TreeView1" NodeWrap="false" ShowExpandCollapse="False" NodeIndent="15" NodeStyle-ChildNodesPadding="1" NodeStyle-VerticalPadding="5">
<DataBindings>
<asp:TreeNodeBinding DataMember="cat" Text="Select Product" PopulateOnDemand="false" />
<asp:TreeNodeBinding DataMember="Category" TextField="Catname" PopulateOnDemand="false" />
<asp:TreeNodeBinding DataMember="product" TextField="productname" NavigateUrlField="navi" />
</DataBindings>
<SelectedNodeStyle BackColor="Black" Font-Size="larger" Font-Names="garamond" />
<%-- <LeafNodeStyle Font-Size="large" Font-Names="garamond" /> for child--%>
<ParentNodeStyle ForeColor="DarkGray" Font-Names="garamond" Font-Size="20px"/> <%--for parent node--%>
<%--<NodeStyle BackColor="Yellow"/> for all node--%>
</asp:TreeView>

In .vb page

 Dim ds, ds1 As DataSet

    Dim sql, sql1 As New SqlConnection

    Dim cmd, cmd1 As New SqlCommand

    Dim da, d1 As New SqlDataAdapter

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

'select c.catname,p.productname from category c,products p where c.id=p.catid
Dim strMyXml As String = ""
Dim strMyXml2 As String = ""
Dim strMyXml1 As String = ""

 sql = New SqlConnection("

 your connection

")

cmd = New SqlCommand("

select catname,id from category

", sql)

        da = New SqlDataAdapter(cmd)

        da.Fill(ds)

If ds.Tables(0).Rows.Count > 0 Then
strMyXml2 = "<?xml version='1.0' encoding='utf-8' ?><cat>"
For i As Integer = 0 To ds.Tables(0).Rows.Count - 1
strMyXml = strMyXml + "<Category Catname='" + ds.Tables(0).Rows(i).ItemArray(0).ToString() + "'>" + strMyXml1 + "</Category> "

 

        cmd1 = New SqlCommand("

select productname,id from products where catid='" + ds.Tables(0).Rows(i).ItemArray(1).ToString() + "'

", sql)

        da1 = New SqlDataAdapter(cmd)

        da1.Fill(ds1)

If ds1.Tables(0).Rows.Count > 0 Then
For j As Integer = 0 To ds1.Tables(0).Rows.Count - 1
strMyXml1 = strMyXml1 + "<product productname='" + ds1.Tables(0).Rows(j).ItemArray(0).ToString() + "' navi='treeview.aspx?id=" + ds1.Tables(0).Rows(j).ItemArray(1).ToString() + "' />"
   Next
End If
Next
strMyXml2 = strMyXml2 + strMyXml + "</cat>"
Dim xDoc As New XmlDocument

xDoc.LoadXml(strMyXml2)
xDoc.Save(Server.MapPath("XMLFile.xml"))

End If
End Sub

after execution

XmlFile.xml get fill

output

<?xml version="1.0" encoding="utf-8"?>
<cat>
  <Category Catname="Indian Marble">
<product productname="Australian White" navi="treeview.aspx?id=2" />
<product productname="Beige Travertine" navi="treeview.aspx?id=3" />
<product productname="Black Markino" navi="treeview.aspx?id=4" />
<product productname="Black Pearl" navi="treeview.aspx?id=5" />
<product productname="Black Portoro" navi="treeview.aspx?id=6" />
<product productname="Blue Pearl" navi="treeview.aspx?id=7" />

</Category>
<Category Catname="Indian Granite">
 <product productname="Rosso Pistello " navi="treeview.aspx?id=30" />
<product productname="Rosso Verona " navi="treeview.aspx?id=31" />
<product productname="Shell Beige " navi="treeview.aspx?id=32" />
<product productname="White onyx " navi="treeview.aspx?id=33" />
<product productname="Antique Beige" navi="treeview.aspx?id=1" />
<product productname="YELLOW_big" navi="treeview.aspx?id=34" />
</Category>
<Category Catname="Iron Ore">
   <product productname="MYRA BEIZE" navi="treeview.aspx?id=22" />
<product productname="Noche Travertine " navi="treeview.aspx?id=23" />
<product productname="Perlato Sicilia " navi="treeview.aspx?id=24" />
<product productname="Red Alicante " navi="treeview.aspx?id=25" />
<product productname="Red Fire " navi="treeview.aspx?id=26" />
<product productname="Red Travertine " navi="treeview.aspx?id=27" />
<product productname="Rosso Atlanta " navi="treeview.aspx?id=28" />
<product productname="Rosso Lavente " navi="treeview.aspx?id=29" />
<product productname="Rosso Pistello " navi="treeview.aspx?id=30" />
<product productname="Rosso Verona " navi="treeview.aspx?id=31" />
<product productname="Shell Beige " navi="treeview.aspx?id=32" />
<product productname="White onyx " navi="treeview.aspx?id=33" />
<product productname="Antique Beige" navi="treeview.aspx?id=1" />
<product productname="YELLOW_big" navi="treeview.aspx?id=34" />
</Category>
</cat>

Croping Image Using Jquery and Asp.net

I have taken help of Jquery to crop image

jquery.jcrop.js
download : jquery.min.js

css : jquery.Jcrop.css

For jquery.jcrop.js
here is code

create jquery.jcrop.js file
 /// for jquery.jcrop.js start


'

(function ($) {

  $.Jcrop = function (obj, opt) {
    var options = $.extend({}, $.Jcrop.defaults),
        docOffset, lastcurs, ie6mode = false;

    // Internal Methods {{{
    function px(n) {
      return parseInt(n, 10) + 'px';
    }
    function pct(n) {
      return parseInt(n, 10) + '%';
    }
    function cssClass(cl) {
      return options.baseClass + '-' + cl;
    }
    function supportsColorFade() {
      return $.fx.step.hasOwnProperty('backgroundColor');
    }
    function getPos(obj) //{{{
    {
      // Updated in v0.9.4 to use built-in dimensions plugin
      var pos = $(obj).offset();
      return [pos.left, pos.top];
    }
    //}}}
    function mouseAbs(e) //{{{
    {
      return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])];
    }
    //}}}
    function setOptions(opt) //{{{
    {
      if (typeof(opt) !== 'object') {
        opt = {};
      }
      options = $.extend(options, opt);

      if (typeof(options.onChange) !== 'function') {
        options.onChange = function () {};
      }
      if (typeof(options.onSelect) !== 'function') {
        options.onSelect = function () {};
      }
      if (typeof(options.onRelease) !== 'function') {
        options.onRelease = function () {};
      }
    }
    //}}}
    function myCursor(type) //{{{
    {
      if (type !== lastcurs) {
        Tracker.setCursor(type);
        lastcurs = type;
      }
    }
    //}}}
    function startDragMode(mode, pos) //{{{
    {
      docOffset = getPos($img);
      Tracker.setCursor(mode === 'move' ? mode : mode + '-resize');

      if (mode === 'move') {
        return Tracker.activateHandlers(createMover(pos), doneSelect);
      }

      var fc = Coords.getFixed();
      var opp = oppLockCorner(mode);
      var opc = Coords.getCorner(oppLockCorner(opp));

      Coords.setPressed(Coords.getCorner(opp));
      Coords.setCurrent(opc);

      Tracker.activateHandlers(dragmodeHandler(mode, fc), doneSelect);
    }
    //}}}
    function dragmodeHandler(mode, f) //{{{
    {
      return function (pos) {
        if (!options.aspectRatio) {
          switch (mode) {
          case 'e':
            pos[1] = f.y2;
            break;
          case 'w':
            pos[1] = f.y2;
            break;
          case 'n':
            pos[0] = f.x2;
            break;
          case 's':
            pos[0] = f.x2;
            break;
          }
        } else {
          switch (mode) {
          case 'e':
            pos[1] = f.y + 1;
            break;
          case 'w':
            pos[1] = f.y + 1;
            break;
          case 'n':
            pos[0] = f.x + 1;
            break;
          case 's':
            pos[0] = f.x + 1;
            break;
          }
        }
        Coords.setCurrent(pos);
        Selection.update();
      };
    }
    //}}}
    function createMover(pos) //{{{
    {
      var lloc = pos;
      KeyManager.watchKeys();

      return function (pos) {
        Coords.moveOffset([pos[0] - lloc[0], pos[1] - lloc[1]]);
        lloc = pos;

        Selection.update();
      };
    }
    //}}}
    function oppLockCorner(ord) //{{{
    {
      switch (ord) {
      case 'n':
        return 'sw';
      case 's':
        return 'nw';
      case 'e':
        return 'nw';
      case 'w':
        return 'ne';
      case 'ne':
        return 'sw';
      case 'nw':
        return 'se';
      case 'se':
        return 'nw';
      case 'sw':
        return 'ne';
      }
    }
    //}}}
    function createDragger(ord) //{{{
    {
      return function (e) {
        if (options.disabled) {
          return false;
        }
        if ((ord === 'move') && !options.allowMove) {
          return false;
        }
        btndown = true;
        startDragMode(ord, mouseAbs(e));
        e.stopPropagation();
        e.preventDefault();
        return false;
      };
    }
    //}}}
    function presize($obj, w, h) //{{{
    {
      var nw = $obj.width(),
          nh = $obj.height();
      if ((nw > w) && w > 0) {
        nw = w;
        nh = (w / $obj.width()) * $obj.height();
      }
      if ((nh > h) && h > 0) {
        nh = h;
        nw = (h / $obj.height()) * $obj.width();
      }
      xscale = $obj.width() / nw;
      yscale = $obj.height() / nh;
      $obj.width(nw).height(nh);
    }
    //}}}
    function unscale(c) //{{{
    {
      return {
        x: parseInt(c.x * xscale, 10),
        y: parseInt(c.y * yscale, 10),
        x2: parseInt(c.x2 * xscale, 10),
        y2: parseInt(c.y2 * yscale, 10),
        w: parseInt(c.w * xscale, 10),
        h: parseInt(c.h * yscale, 10)
      };
    }
    //}}}
    function doneSelect(pos) //{{{
    {
      var c = Coords.getFixed();
      if ((c.w > options.minSelect[0]) && (c.h > options.minSelect[1])) {
        Selection.enableHandles();
        Selection.done();
      } else {
        Selection.release();
      }
      Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default');
    }
    //}}}
    function newSelection(e) //{{{
    {
      if (options.disabled) {
        return false;
      }
      if (!options.allowSelect) {
        return false;
      }
      btndown = true;
      docOffset = getPos($img);
      Selection.disableHandles();
      myCursor('crosshair');
      var pos = mouseAbs(e);
      Coords.setPressed(pos);
      Selection.update();
      Tracker.activateHandlers(selectDrag, doneSelect);
      KeyManager.watchKeys();

      e.stopPropagation();
      e.preventDefault();
      return false;
    }
    //}}}
    function selectDrag(pos) //{{{
    {
      Coords.setCurrent(pos);
      Selection.update();
    }
    //}}}
    function newTracker() //{{{
    {
      var trk = $('<div></div>').addClass(cssClass('tracker'));
      if ($.browser.msie) {
        trk.css({
          opacity: 0,
          backgroundColor: 'white'
        });
      }
      return trk;
    }
    //}}}

    // }}}
    // Initialization {{{
    // Sanitize some options {{{
    if ($.browser.msie && ($.browser.version.split('.')[0] === '6')) {
      ie6mode = true;
    }
    if (typeof(obj) !== 'object') {
      obj = $(obj)[0];
    }
    if (typeof(opt) !== 'object') {
      opt = {};
    }
    // }}}
    setOptions(opt);
    // Initialize some jQuery objects {{{
    // The values are SET on the image(s) for the interface
    // If the original image has any of these set, they will be reset
    // However, if you destroy() the Jcrop instance the original image's
    // character in the DOM will be as you left it.
    var img_css = {
      border: 'none',
      margin: 0,
      padding: 0,
      position: 'absolute'
    };

    var $origimg = $(obj);
    var $img = $origimg.clone().removeAttr('id').css(img_css);

    $img.width($origimg.width());
    $img.height($origimg.height());
    $origimg.after($img).hide();

    presize($img, options.boxWidth, options.boxHeight);

    var boundx = $img.width(),
        boundy = $img.height(),
        
        
        $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
        position: 'relative',
        backgroundColor: options.bgColor
      }).insertAfter($origimg).append($img);

    delete(options.bgColor);
    if (options.addClass) {
      $div.addClass(options.addClass);
    }

    var $img2 = $('<img />')
        .attr('src', $img.attr('src')).css(img_css).width(boundx).height(boundy),

        $img_holder = $('<div />') 
        .width(pct(100)).height(pct(100)).css({
          zIndex: 310,
          position: 'absolute',
          overflow: 'hidden'
        }).append($img2),

        $hdl_holder = $('<div />') 
        .width(pct(100)).height(pct(100)).css('zIndex', 320), 

        $sel = $('<div />') 
        .css({
          position: 'absolute',
          zIndex: 300
        }).insertBefore($img).append($img_holder, $hdl_holder); 

    if (ie6mode) {
      $sel.css({
        overflowY: 'hidden'
      });
    }

    var bound = options.boundary;
    var $trk = newTracker().width(boundx + (bound * 2)).height(boundy + (bound * 2)).css({
      position: 'absolute',
      top: px(-bound),
      left: px(-bound),
      zIndex: 290
    }).mousedown(newSelection);

    /* }}} */
    // Set more variables {{{
    var bgopacity = options.bgOpacity,
        xlimit, ylimit, xmin, ymin, xscale, yscale, enabled = true,
        btndown, animating, shift_down;

    docOffset = getPos($img);
    // }}}
    // }}}
    // Internal Modules {{{
    // Touch Module {{{ 
    var Touch = (function () {
      // Touch support detection function adapted (under MIT License)
      // from code by Jeffrey Sambells - http://github.com/iamamused/
      function hasTouchSupport() {
        var support = {},
            events = ['touchstart', 'touchmove', 'touchend'],
            el = document.createElement('div'), i;

        try {
          for(i=0; i<events.length; i++) {
            var eventName = events[i];
            eventName = 'on' + eventName;
            var isSupported = (eventName in el);
            if (!isSupported) {
              el.setAttribute(eventName, 'return;');
              isSupported = typeof el[eventName] == 'function';
            }
            support[events[i]] = isSupported;
          }
          return support.touchstart && support.touchend && support.touchmove;
        }
        catch(err) {
          return false;
        }
      }

      function detectSupport() {
        if ((options.touchSupport === true) || (options.touchSupport === false)) return options.touchSupport;
          else return hasTouchSupport();
      }
      return {
        createDragger: function (ord) {
          return function (e) {
            e.pageX = e.originalEvent.changedTouches[0].pageX;
            e.pageY = e.originalEvent.changedTouches[0].pageY;
            if (options.disabled) {
              return false;
            }
            if ((ord === 'move') && !options.allowMove) {
              return false;
            }
            btndown = true;
            startDragMode(ord, mouseAbs(e));
            e.stopPropagation();
            e.preventDefault();
            return false;
          };
        },
        newSelection: function (e) {
          e.pageX = e.originalEvent.changedTouches[0].pageX;
          e.pageY = e.originalEvent.changedTouches[0].pageY;
          return newSelection(e);
        },
        isSupported: hasTouchSupport,
        support: detectSupport()
      };
    }());
    // }}}
    // Coords Module {{{
    var Coords = (function () {
      var x1 = 0,
          y1 = 0,
          x2 = 0,
          y2 = 0,
          ox, oy;

      function setPressed(pos) //{{{
      {
        pos = rebound(pos);
        x2 = x1 = pos[0];
        y2 = y1 = pos[1];
      }
      //}}}
      function setCurrent(pos) //{{{
      {
        pos = rebound(pos);
        ox = pos[0] - x2;
        oy = pos[1] - y2;
        x2 = pos[0];
        y2 = pos[1];
      }
      //}}}
      function getOffset() //{{{
      {
        return [ox, oy];
      }
      //}}}
      function moveOffset(offset) //{{{
      {
        var ox = offset[0],
            oy = offset[1];

        if (0 > x1 + ox) {
          ox -= ox + x1;
        }
        if (0 > y1 + oy) {
          oy -= oy + y1;
        }

        if (boundy < y2 + oy) {
          oy += boundy - (y2 + oy);
        }
        if (boundx < x2 + ox) {
          ox += boundx - (x2 + ox);
        }

        x1 += ox;
        x2 += ox;
        y1 += oy;
        y2 += oy;
      }
      //}}}
      function getCorner(ord) //{{{
      {
        var c = getFixed();
        switch (ord) {
        case 'ne':
          return [c.x2, c.y];
        case 'nw':
          return [c.x, c.y];
        case 'se':
          return [c.x2, c.y2];
        case 'sw':
          return [c.x, c.y2];
        }
      }
      //}}}
      function getFixed() //{{{
      {
        if (!options.aspectRatio) {
          return getRect();
        }
        // This function could use some optimization I think...
        var aspect = options.aspectRatio,
            min_x = options.minSize[0] / xscale,
            
            
            //min_y = options.minSize[1]/yscale,
            max_x = options.maxSize[0] / xscale,
            max_y = options.maxSize[1] / yscale,
            rw = x2 - x1,
            rh = y2 - y1,
            rwa = Math.abs(rw),
            rha = Math.abs(rh),
            real_ratio = rwa / rha,
            xx, yy;

        if (max_x === 0) {
          max_x = boundx * 10;
        }
        if (max_y === 0) {
          max_y = boundy * 10;
        }
        if (real_ratio < aspect) {
          yy = y2;
          w = rha * aspect;
          xx = rw < 0 ? x1 - w : w + x1;

          if (xx < 0) {
            xx = 0;
            h = Math.abs((xx - x1) / aspect);
            yy = rh < 0 ? y1 - h : h + y1;
          } else if (xx > boundx) {
            xx = boundx;
            h = Math.abs((xx - x1) / aspect);
            yy = rh < 0 ? y1 - h : h + y1;
          }
        } else {
          xx = x2;
          h = rwa / aspect;
          yy = rh < 0 ? y1 - h : y1 + h;
          if (yy < 0) {
            yy = 0;
            w = Math.abs((yy - y1) * aspect);
            xx = rw < 0 ? x1 - w : w + x1;
          } else if (yy > boundy) {
            yy = boundy;
            w = Math.abs(yy - y1) * aspect;
            xx = rw < 0 ? x1 - w : w + x1;
          }
        }

        // Magic %-)
        if (xx > x1) { // right side
          if (xx - x1 < min_x) {
            xx = x1 + min_x;
          } else if (xx - x1 > max_x) {
            xx = x1 + max_x;
          }
          if (yy > y1) {
            yy = y1 + (xx - x1) / aspect;
          } else {
            yy = y1 - (xx - x1) / aspect;
          }
        } else if (xx < x1) { // left side
          if (x1 - xx < min_x) {
            xx = x1 - min_x;
          } else if (x1 - xx > max_x) {
            xx = x1 - max_x;
          }
          if (yy > y1) {
            yy = y1 + (x1 - xx) / aspect;
          } else {
            yy = y1 - (x1 - xx) / aspect;
          }
        }

        if (xx < 0) {
          x1 -= xx;
          xx = 0;
        } else if (xx > boundx) {
          x1 -= xx - boundx;
          xx = boundx;
        }

        if (yy < 0) {
          y1 -= yy;
          yy = 0;
        } else if (yy > boundy) {
          y1 -= yy - boundy;
          yy = boundy;
        }

        return makeObj(flipCoords(x1, y1, xx, yy));
      }
      //}}}
      function rebound(p) //{{{
      {
        if (p[0] < 0) {
          p[0] = 0;
        }
        if (p[1] < 0) {
          p[1] = 0;
        }

        if (p[0] > boundx) {
          p[0] = boundx;
        }
        if (p[1] > boundy) {
          p[1] = boundy;
        }

        return [p[0], p[1]];
      }
      //}}}
      function flipCoords(x1, y1, x2, y2) //{{{
      {
        var xa = x1,
            xb = x2,
            ya = y1,
            yb = y2;
        if (x2 < x1) {
          xa = x2;
          xb = x1;
        }
        if (y2 < y1) {
          ya = y2;
          yb = y1;
        }
        return [Math.round(xa), Math.round(ya), Math.round(xb), Math.round(yb)];
      }
      //}}}
      function getRect() //{{{
      {
        var xsize = x2 - x1,
            ysize = y2 - y1,
            delta;

        if (xlimit && (Math.abs(xsize) > xlimit)) {
          x2 = (xsize > 0) ? (x1 + xlimit) : (x1 - xlimit);
        }
        if (ylimit && (Math.abs(ysize) > ylimit)) {
          y2 = (ysize > 0) ? (y1 + ylimit) : (y1 - ylimit);
        }

        if (ymin / yscale && (Math.abs(ysize) < ymin / yscale)) {
          y2 = (ysize > 0) ? (y1 + ymin / yscale) : (y1 - ymin / yscale);
        }
        if (xmin / xscale && (Math.abs(xsize) < xmin / xscale)) {
          x2 = (xsize > 0) ? (x1 + xmin / xscale) : (x1 - xmin / xscale);
        }

        if (x1 < 0) {
          x2 -= x1;
          x1 -= x1;
        }
        if (y1 < 0) {
          y2 -= y1;
          y1 -= y1;
        }
        if (x2 < 0) {
          x1 -= x2;
          x2 -= x2;
        }
        if (y2 < 0) {
          y1 -= y2;
          y2 -= y2;
        }
        if (x2 > boundx) {
          delta = x2 - boundx;
          x1 -= delta;
          x2 -= delta;
        }
        if (y2 > boundy) {
          delta = y2 - boundy;
          y1 -= delta;
          y2 -= delta;
        }
        if (x1 > boundx) {
          delta = x1 - boundy;
          y2 -= delta;
          y1 -= delta;
        }
        if (y1 > boundy) {
          delta = y1 - boundy;
          y2 -= delta;
          y1 -= delta;
        }

        return makeObj(flipCoords(x1, y1, x2, y2));
      }
      //}}}
      function makeObj(a) //{{{
      {
        return {
          x: a[0],
          y: a[1],
          x2: a[2],
          y2: a[3],
          w: a[2] - a[0],
          h: a[3] - a[1]
        };
      }
      //}}}

      return {
        flipCoords: flipCoords,
        setPressed: setPressed,
        setCurrent: setCurrent,
        getOffset: getOffset,
        moveOffset: moveOffset,
        getCorner: getCorner,
        getFixed: getFixed
      };
    }());

    //}}}
    // Selection Module {{{
    var Selection = (function () {
      var awake, hdep = 370;
      var borders = {};
      var handle = {};
      var seehandles = false;
      var hhs = options.handleOffset;

      // Private Methods
      function insertBorder(type) //{{{
      {
        var jq = $('<div />').css({
          position: 'absolute',
          opacity: options.borderOpacity
        }).addClass(cssClass(type));
        $img_holder.append(jq);
        return jq;
      }
      //}}}
      function dragDiv(ord, zi) //{{{
      {
        var jq = $('<div />').mousedown(createDragger(ord)).css({
          cursor: ord + '-resize',
          position: 'absolute',
          zIndex: zi
        });

        if (Touch.support) {
          jq.bind('touchstart', Touch.createDragger(ord));
        }

        $hdl_holder.append(jq);
        return jq;
      }
      //}}}
      function insertHandle(ord) //{{{
      {
        return dragDiv(ord, hdep++).css({
          top: px(-hhs + 1),
          left: px(-hhs + 1),
          opacity: options.handleOpacity
        }).addClass(cssClass('handle'));
      }
      //}}}
      function insertDragbar(ord) //{{{
      {
        var s = options.handleSize,
            h = s,
            w = s,
            t = hhs,
            l = hhs;

        switch (ord) {
        case 'n':
        case 's':
          w = pct(100);
          break;
        case 'e':
        case 'w':
          h = pct(100);
          break;
        }

        return dragDiv(ord, hdep++).width(w).height(h).css({
          top: px(-t + 1),
          left: px(-l + 1)
        });
      }
      //}}}
      function createHandles(li) //{{{
      {
        var i;
        for (i = 0; i < li.length; i++) {
          handle[li[i]] = insertHandle(li[i]);
        }
      }
      //}}}
      function moveHandles(c) //{{{
      {
        var midvert = Math.round((c.h / 2) - hhs),
            midhoriz = Math.round((c.w / 2) - hhs),
            north = -hhs + 1,
            west = -hhs + 1,
            east = c.w - hhs,
            south = c.h - hhs,
            x, y;

        if (handle.e) {
          handle.e.css({
            top: px(midvert),
            left: px(east)
          });
          handle.w.css({
            top: px(midvert)
          });
          handle.s.css({
            top: px(south),
            left: px(midhoriz)
          });
          handle.n.css({
            left: px(midhoriz)
          });
        }
        if (handle.ne) {
          handle.ne.css({
            left: px(east)
          });
          handle.se.css({
            top: px(south),
            left: px(east)
          });
          handle.sw.css({
            top: px(south)
          });
        }
        if (handle.b) {
          handle.b.css({
            top: px(south)
          });
          handle.r.css({
            left: px(east)
          });
        }
      }
      //}}}
      function moveto(x, y) //{{{
      {
        $img2.css({
          top: px(-y),
          left: px(-x)
        });
        $sel.css({
          top: px(y),
          left: px(x)
        });
      }
      //}}}
      function resize(w, h) //{{{
      {
        $sel.width(w).height(h);
      }
      //}}}
      function refresh() //{{{
      {
        var c = Coords.getFixed();

        Coords.setPressed([c.x, c.y]);
        Coords.setCurrent([c.x2, c.y2]);

        updateVisible();
      }
      //}}}

      // Internal Methods
      function updateVisible() //{{{
      {
        if (awake) {
          return update();
        }
      }
      //}}}
      function update() //{{{
      {
        var c = Coords.getFixed();

        resize(c.w, c.h);
        moveto(c.x, c.y);

/*
options.drawBorders &&
borders.right.css({ left: px(c.w-1) }) &&
borders.bottom.css({ top: px(c.h-1) });
      */

        if (seehandles) {
          moveHandles(c);
        }
        if (!awake) {
          show();
        }

        options.onChange.call(api, unscale(c));
      }
      //}}}
      function show() //{{{
      {
        $sel.show();

        if (options.bgFade) {
          $img.fadeTo(options.fadeTime, bgopacity);
        } else {
          $img.css('opacity', bgopacity);
        }

        awake = true;
      }
      //}}}
      function release() //{{{
      {
        disableHandles();
        $sel.hide();

        if (options.bgFade) {
          $img.fadeTo(options.fadeTime, 1);
        } else {
          $img.css('opacity', 1);
        }

        awake = false;
        options.onRelease.call(api);
      }
      //}}}
      function showHandles() //{{{
      {
        if (seehandles) {
          moveHandles(Coords.getFixed());
          $hdl_holder.show();
        }
      }
      //}}}
      function enableHandles() //{{{
      {
        seehandles = true;
        if (options.allowResize) {
          moveHandles(Coords.getFixed());
          $hdl_holder.show();
          return true;
        }
      }
      //}}}
      function disableHandles() //{{{
      {
        seehandles = false;
        $hdl_holder.hide();
      } 
      //}}}
      function animMode(v) //{{{
      {
        if (animating === v) {
          disableHandles();
        } else {
          enableHandles();
        }
      } 
      //}}}
      function done() //{{{
      {
        animMode(false);
        refresh();
      } 
      //}}}
      /* Insert draggable elements {{{*/

      // Insert border divs for outline
      if (options.drawBorders) {
        borders = {
          top: insertBorder('hline'),
          bottom: insertBorder('hline bottom'),
          left: insertBorder('vline'),
          right: insertBorder('vline right')
        };
      }

      // Insert handles on edges
      if (options.dragEdges) {
        handle.t = insertDragbar('n');
        handle.b = insertDragbar('s');
        handle.r = insertDragbar('e');
        handle.l = insertDragbar('w');
      }

      // Insert side and corner handles
      if (options.sideHandles) {
        createHandles(['n', 's', 'e', 'w']);
      }
      if (options.cornerHandles) {
        createHandles(['sw', 'nw', 'ne', 'se']);
      }

      
      //}}}

      var $track = newTracker().mousedown(createDragger('move')).css({
        cursor: 'move',
        position: 'absolute',
        zIndex: 360
      });

      if (Touch.support) {
        $track.bind('touchstart.jcrop', Touch.createDragger('move'));
      }

      $img_holder.append($track);
      disableHandles();

      return {
        updateVisible: updateVisible,
        update: update,
        release: release,
        refresh: refresh,
        isAwake: function () {
          return awake;
        },
        setCursor: function (cursor) {
          $track.css('cursor', cursor);
        },
        enableHandles: enableHandles,
        enableOnly: function () {
          seehandles = true;
        },
        showHandles: showHandles,
        disableHandles: disableHandles,
        animMode: animMode,
        done: done
      };
    }());
    
    //}}}
    // Tracker Module {{{
    var Tracker = (function () {
      var onMove = function () {},
          onDone = function () {},
          trackDoc = options.trackDocument;

      function toFront() //{{{
      {
        $trk.css({
          zIndex: 450
        });
        if (trackDoc) {
          $(document)
            .bind('mousemove',trackMove)
            .bind('mouseup',trackUp);
        }
      } 
      //}}}
      function toBack() //{{{
      {
        $trk.css({
          zIndex: 290
        });
        if (trackDoc) {
          $(document)
            .unbind('mousemove', trackMove)
            .unbind('mouseup', trackUp);
        }
      } 
      //}}}
      function trackMove(e) //{{{
      {
        onMove(mouseAbs(e));
        return false;
      } 
      //}}}
      function trackUp(e) //{{{
      {
        e.preventDefault();
        e.stopPropagation();

        if (btndown) {
          btndown = false;

          onDone(mouseAbs(e));

          if (Selection.isAwake()) {
            options.onSelect.call(api, unscale(Coords.getFixed()));
          }

          toBack();
          onMove = function () {};
          onDone = function () {};
        }

        return false;
      }
      //}}}
      function activateHandlers(move, done) //{{{
      {
        btndown = true;
        onMove = move;
        onDone = done;
        toFront();
        return false;
      }
      //}}}
      function trackTouchMove(e) //{{{
      {
        e.pageX = e.originalEvent.changedTouches[0].pageX;
        e.pageY = e.originalEvent.changedTouches[0].pageY;
        return trackMove(e);
      }
      //}}}
      function trackTouchEnd(e) //{{{
      {
        e.pageX = e.originalEvent.changedTouches[0].pageX;
        e.pageY = e.originalEvent.changedTouches[0].pageY;
        return trackUp(e);
      }
      //}}}
      function setCursor(t) //{{{
      {
        $trk.css('cursor', t);
      }
      //}}}

      if (Touch.support) {
        $(document)
          .bind('touchmove', trackTouchMove)
          .bind('touchend', trackTouchEnd);
      }

      if (!trackDoc) {
        $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);
      }

      $img.before($trk);
      return {
        activateHandlers: activateHandlers,
        setCursor: setCursor
      };
    }());
    //}}}
    // KeyManager Module {{{
    var KeyManager = (function () {
      var $keymgr = $('<input type="radio" />').css({
        position: 'fixed',
        left: '-120px',
        width: '12px'
      }),
          $keywrap = $('<div />').css({
          position: 'absolute',
          overflow: 'hidden'
        }).append($keymgr);

      function watchKeys() //{{{
      {
        if (options.keySupport) {
          $keymgr.show();
          $keymgr.focus();
        }
      }
      //}}}
      function onBlur(e) //{{{
      {
        $keymgr.hide();
      }
      //}}}
      function doNudge(e, x, y) //{{{
      {
        if (options.allowMove) {
          Coords.moveOffset([x, y]);
          Selection.updateVisible();
        }
        e.preventDefault();
        e.stopPropagation();
      }
      //}}}
      function parseKey(e) //{{{
      {
        if (e.ctrlKey) {
          return true;
        }
        shift_down = e.shiftKey ? true : false;
        var nudge = shift_down ? 10 : 1;

        switch (e.keyCode) {
        case 37:
          doNudge(e, -nudge, 0);
          break;
        case 39:
          doNudge(e, nudge, 0);
          break;
        case 38:
          doNudge(e, 0, -nudge);
          break;
        case 40:
          doNudge(e, 0, nudge);
          break;
        case 27:
          Selection.release();
          break;
        case 9:
          return true;
        }

        return false;
      }
      //}}}

      if (options.keySupport) {
        $keymgr.keydown(parseKey).blur(onBlur);
        if (ie6mode || !options.fixedSupport) {
          $keymgr.css({
            position: 'absolute',
            left: '-20px'
          });
          $keywrap.append($keymgr).insertBefore($img);
        } else {
          $keymgr.insertBefore($img);
        }
      }


      return {
        watchKeys: watchKeys
      };
    }());
    //}}}
    // }}}
    // API methods {{{
    function setClass(cname) //{{{
    {
      $div.removeClass().addClass(cssClass('holder')).addClass(cname);
    }
    //}}}
    function animateTo(a, callback) //{{{
    {
      var x1 = parseInt(a[0], 10) / xscale,
          y1 = parseInt(a[1], 10) / yscale,
          x2 = parseInt(a[2], 10) / xscale,
          y2 = parseInt(a[3], 10) / yscale;

      if (animating) {
        return;
      }

      var animto = Coords.flipCoords(x1, y1, x2, y2),
          c = Coords.getFixed(),
          initcr = [c.x, c.y, c.x2, c.y2],
          animat = initcr,
          interv = options.animationDelay,
          ix1 = animto[0] - initcr[0],
          iy1 = animto[1] - initcr[1],
          ix2 = animto[2] - initcr[2],
          iy2 = animto[3] - initcr[3],
          pcent = 0,
          velocity = options.swingSpeed;

      x = animat[0];
      y = animat[1];
      x2 = animat[2];
      y2 = animat[3];

      Selection.animMode(true);
      var anim_timer;

      function queueAnimator() {
        window.setTimeout(animator, interv);
      }
      var animator = (function () {
        return function () {
          pcent += (100 - pcent) / velocity;

          animat[0] = x + ((pcent / 100) * ix1);
          animat[1] = y + ((pcent / 100) * iy1);
          animat[2] = x2 + ((pcent / 100) * ix2);
          animat[3] = y2 + ((pcent / 100) * iy2);

          if (pcent >= 99.8) {
            pcent = 100;
          }
          if (pcent < 100) {
            setSelectRaw(animat);
            queueAnimator();
          } else {
            Selection.done();
            if (typeof(callback) === 'function') {
              callback.call(api);
            }
          }
        };
      }());
      queueAnimator();
    }
    //}}}
    function setSelect(rect) //{{{
    {
      setSelectRaw([
      parseInt(rect[0], 10) / xscale, parseInt(rect[1], 10) / yscale, parseInt(rect[2], 10) / xscale, parseInt(rect[3], 10) / yscale]);
    }
    //}}}
    function setSelectRaw(l) //{{{
    {
      Coords.setPressed([l[0], l[1]]);
      Coords.setCurrent([l[2], l[3]]);
      Selection.update();
    }
    //}}}
    function tellSelect() //{{{
    {
      return unscale(Coords.getFixed());
    }
    //}}}
    function tellScaled() //{{{
    {
      return Coords.getFixed();
    }
    //}}}
    function setOptionsNew(opt) //{{{
    {
      setOptions(opt);
      interfaceUpdate();
    }
    //}}}
    function disableCrop() //{{{
    {
      options.disabled = true;
      Selection.disableHandles();
      Selection.setCursor('default');
      Tracker.setCursor('default');
    }
    //}}}
    function enableCrop() //{{{
    {
      options.disabled = false;
      interfaceUpdate();
    }
    //}}}
    function cancelCrop() //{{{
    {
      Selection.done();
      Tracker.activateHandlers(null, null);
    }
    //}}}
    function destroy() //{{{
    {
      $div.remove();
      $origimg.show();
      $(obj).removeData('Jcrop');
    }
    //}}}
    function setImage(src, callback) //{{{
    {
      Selection.release();
      disableCrop();
      var img = new Image();
      img.onload = function () {
        var iw = img.width;
        var ih = img.height;
        var bw = options.boxWidth;
        var bh = options.boxHeight;
        $img.width(iw).height(ih);
        $img.attr('src', src);
        $img2.attr('src', src);
        presize($img, bw, bh);
        boundx = $img.width();
        boundy = $img.height();
        $img2.width(boundx).height(boundy);
        $trk.width(boundx + (bound * 2)).height(boundy + (bound * 2));
        $div.width(boundx).height(boundy);
        enableCrop();

        if (typeof(callback) === 'function') {
          callback.call(api);
        }
      };
      img.src = src;
    }
    //}}}
    function interfaceUpdate(alt) //{{{
    // This method tweaks the interface based on options object.
    // Called when options are changed and at end of initialization.
    {
      if (options.allowResize) {
        if (alt) {
          Selection.enableOnly();
        } else {
          Selection.enableHandles();
        }
      } else {
        Selection.disableHandles();
      }

      Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default');
      Selection.setCursor(options.allowMove ? 'move' : 'default');


      if (options.hasOwnProperty('setSelect')) {
        setSelect(options.setSelect);
        Selection.done();
        delete(options.setSelect);
      }

      if (options.hasOwnProperty('trueSize')) {
        xscale = options.trueSize[0] / boundx;
        yscale = options.trueSize[1] / boundy;
      }
      if (options.hasOwnProperty('bgColor')) {

        if (supportsColorFade() && options.fadeTime) {
          $div.animate({
            backgroundColor: options.bgColor
          }, {
            queue: false,
            duration: options.fadeTime
          });
        } else {
          $div.css('backgroundColor', options.bgColor);
        }

        delete(options.bgColor);
      }
      if (options.hasOwnProperty('bgOpacity')) {
        bgopacity = options.bgOpacity;

        if (Selection.isAwake()) {
          if (options.fadeTime) {
            $img.fadeTo(options.fadeTime, bgopacity);
          } else {
            $div.css('opacity', options.opacity);
          }
        }
        delete(options.bgOpacity);
      }

      xlimit = options.maxSize[0] || 0;
      ylimit = options.maxSize[1] || 0;
      xmin = options.minSize[0] || 0;
      ymin = options.minSize[1] || 0;

      if (options.hasOwnProperty('outerImage')) {
        $img.attr('src', options.outerImage);
        delete(options.outerImage);
      }

      Selection.refresh();
    }
    //}}}
    //}}}

    if (Touch.support) {
      $trk.bind('touchstart', Touch.newSelection);
    }

    $hdl_holder.hide();
    interfaceUpdate(true);

    var api = {
      setImage: setImage,
      animateTo: animateTo,
      setSelect: setSelect,
      setOptions: setOptionsNew,
      tellSelect: tellSelect,
      tellScaled: tellScaled,
      setClass: setClass,

      disable: disableCrop,
      enable: enableCrop,
      cancel: cancelCrop,
      release: Selection.release,
      destroy: destroy,

      focus: KeyManager.watchKeys,

      getBounds: function () {
        return [boundx * xscale, boundy * yscale];
      },
      getWidgetSize: function () {
        return [boundx, boundy];
      },
      getScaleFactor: function () {
        return [xscale, yscale];
      },

      ui: {
        holder: $div,
        selection: $sel
      }
    };

    if ($.browser.msie) {
      $div.bind('selectstart', function () {
        return false;
      });
    }

    $origimg.data('Jcrop', api);
    return api;
  };
  $.fn.Jcrop = function (options, callback) //{{{
  {

    function attachWhenDone(from) //{{{
    {
      var opt = (typeof(options) === 'object') ? options : {};
      var loadsrc = opt.useImg || from.src;
      var img = new Image();
      img.onload = function () {
        function attachJcrop() {
          var api = $.Jcrop(from, opt);
          if (typeof(callback) === 'function') {
            callback.call(api);
          }
        }

        function attachAttempt() {
          if (!img.width || !img.height) {
            window.setTimeout(attachAttempt, 50);
          } else {
            attachJcrop();
          }
        }
        window.setTimeout(attachAttempt, 50);
      };
      img.src = loadsrc;
    }
    //}}}

    // Iterate over each object, attach Jcrop
    this.each(function () {
      // If we've already attached to this object
      if ($(this).data('Jcrop')) {
        // The API can be requested this way (undocumented)
        if (options === 'api') {
          return $(this).data('Jcrop');
        }
        // Otherwise, we just reset the options...
        else {
          $(this).data('Jcrop').setOptions(options);
        }
      }
      // If we haven't been attached, preload and attach
      else {
        attachWhenDone(this);
      }
    });

    // Return "this" so the object is chainable (jQuery-style)
    return this;
  };
  //}}}
  // Global Defaults {{{
  $.Jcrop.defaults = {

    // Basic Settings
    allowSelect: true,
    allowMove: true,
    allowResize: true,

    trackDocument: true,

    // Styling Options
    baseClass: 'jcrop',
    addClass: null,
    bgColor: 'black',
    bgOpacity: 0.6,
    bgFade: false,
    borderOpacity: 0.4,
    handleOpacity: 0.5,
    handleSize: 9,
    handleOffset: 5,

    aspectRatio: 0,
    keySupport: true,
    cornerHandles: true,
    sideHandles: true,
    drawBorders: true,
    dragEdges: true,
    fixedSupport: true,
    touchSupport: null,

    boxWidth: 0,
    boxHeight: 0,
    boundary: 2,
    fadeTime: 400,
    animationDelay: 20,
    swingSpeed: 3,

    minSelect: [0, 0],
    maxSize: [0, 0],
    minSize: [0, 0],

    // Callbacks / Event Handlers
    onChange: function () {},
    onSelect: function () {},
    onRelease: function () {}
  };

  // }}}
}(jQuery));

/// End

///jquery.Jcrop.css


/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
font-size: 0px;
position: absolute;
background: white url('Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-vline.right { right: 0px; }
.jcrop-hline.bottom { bottom: 0px; }
.jcrop-handle {
font-size: 1px;
width: 7px !important;
height: 7px !important;
border: 1px #eee solid;
background-color: #333;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
background: yellow;
}
.custom .jcrop-handle
{
border-color: black;
background-color: #C7BB00;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

///End

Now Code

in .aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.Jcrop.css" />
<script type="text/javascript">
 jQuery(function($) {

 $('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
});
 });
 // Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c) {
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w1').val(c.w);
$('#h1').val(c.h);
};
 function clearCoords() {
$('#coords input').val('');
$('#h').css({ color: 'red' });
window.setTimeout(function() {
$('#h').css({ color: 'inherit' });
}, 500);
};

 </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<img id="target" alt="Flowers" runat="server" />
<label> <input type="hidden" size="4" id="x1" name="x1" runat="server" /></label>
<label> <input type="hidden" size="4" id="y1" name="y1" runat="server"/></label>
<label> <input type="hidden" size="4" id="x2" name="x2" runat="server"/></label>
<label> <input type="hidden" size="4" id="y2" name="y2" runat="server"/></label>
<label><input type="hidden" size="4" id="w1" name="w1" runat="server"/></label>
<label> <input type="hidden" size="4" id="h1" name="h1" runat="server"/></label>
</div>
<asp:Button ID="btncropimg" runat="server" Text="Button" /><br />
<asp:Image ID="cropedImage" runat="server" Visible="False" />
</div>
</form>
</body>
</html>

While selection the height,width,x,y all get set in hidden file using jquery

In .vb page


Imports System
Imports System.Collections.Generic
'using System.Linq;
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Drawing.Drawing2D
Imports System.IO
Imports System.Drawing

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If FileUpload1.HasFile Or FileUpload1.FileContent.Length > 0 Then
FileUpload1.PostedFile.SaveAs(Server.MapPath("actualimage/" + FileUpload1.FileName))
End If
target.Src = "actualimage/" + Fileupload1.FileName
End Sub


Protected Sub  btncropimg _Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles  btncropimg .Click
        Dim x As Integer = Convert.ToInt32(x1.Value)
        Dim y As Integer = Convert.ToInt32(y1.Value)
        Dim w As Integer = Convert.ToInt32(w1.Value)
        Dim h As Integer = Convert.ToInt32(h1.Value)
        'Dim strFileName As String = Crop.CommandArgument
        Dim image As System.Drawing.Image = Bitmap.FromFile(Server.MapPath("actualimage/" +

Fileupload1.FileName))

        'Create a new image from the specified location to

        'specified height and width

        Dim bmp As New Bitmap(w, h, image.PixelFormat)

        Dim g As Graphics = 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(Server.MapPath("cropimage/" + Request.QueryString("name").ToString()), image.RawFormat)

        cropedImage.Visible = True

        cropedImage.ImageUrl = "~/cropimage/" + Fileupload1.

FileName

    End Sub

For compress image see: View Example