Click here to Skip to main content
15,941,071 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadCrop.aspx.cs" Inherits="ImageEx.UploadCrop" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <link href="css/imgareaselect-default.css" rel="stylesheet"/>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/jquery.imgareaselect.pack.js"></script>
        $(document).ready(function () {
            $("#btnCrop").click(function () {
                    aspectRatio: "4:3", handles: true, onSelectEnd: function (img, selection)

        function preview(img, selection) {
            var scaleX = 100 / (selection.width || 1);
            var scaleY = 100 / (selection.height || 1);

            $('#imgCrop + div > img').css({
                width: Math.round(scaleX * 400) + 'px',
                height: Math.round(scaleY * 300) + 'px',
                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'

        $(document).ready(function () {
            $('<div><img src="116.jpg" style="position:relative" /></div>')

                          float: 'bottom',
                          position: 'relative',
                          overflow: 'hidden',
                          width: '100px',
                          height: '100px'

                $('#imgCrop').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview })

    <style type="text/css">
        #btnCrop {
            width: 107px;
        #SubmitCropped {
            width: 92px;
    <form id="form1" runat="server">
        <asp:Panel ID="pnlUpload" runat="server">
            <asp:FileUpload ID="Upload" runat="server" />
            <br />
            <br />
            <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" Width="101px" />
            <br />
            <asp:Label ID="LblError" runat="server" Text="Label" Visible="False"></asp:Label>
      <asp:Panel ID="pnlCrop" runat="server" Visible="false" Height="447px">
           <asp:Image ID="imgCrop" runat="server" Height="250px" Width="300px" />
           <br />
          <input id="btnCrop" type="button" value="Crop" />
           <input id="SubmitCropped" type="submit" value="submit" />
           <br />t;br />
           <br />
           <br />
           <br />

At codebehind file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

namespace ImageEx

Ryan Zahra 7-Oct-13 6:14am    
Can you please explain more exactly what you're trying to do?
Member 10170389 7-Oct-13 6:52am    
My problem is i gave the filename in src attribute,like this..$('<div><img src="abc.jpg"/></div>')
When the end user clicks on upload button the image selected one will save in uploads folder .., i need that path in src attribute or what can i do to solve that problem,And moreover iam storing that image in session variable .please help me sir...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900