Search code examples
c#javascriptjqueryasp.netjcrop

How to show picture cropping area

I have successfully implemented image cropping solution with help of this article Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET. It work fine, but on page load, I want to show default cropping area. just like in below picture. I mean when page is opened that contained picture for cropping, it show default coordinates, however, user can edit these one.

I want to highlight 100x100 coordinates.

This is a closed solution http://jsfiddle.net/kLbVM/3/ In this example, when we click on button it highlights the coordinate, but I need the same thing, when page is loaded.

I am looking for same thing, just like in linkedin.com

enter image description here

Edit: Here is my page source...

<head runat="server">
    <style>
        #imgProfileImage
        {
            width: auto;
            height: auto;
        }
        .jcrop-handle
        {
            background-color: #333;
            border: 1px #eee solid;
            font-size: 1px;
            width: 7px;
            height: 7px;
        }
    </style>

    <link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.Jcrop.pack.js" type="text/javascript"></script>
    <title></title>
</head>

<body>
<form id="form1" runat="server">
<div>
    <asp:Image ID="imgProfileImage" runat="server" width="400px" height="400px" />
    <asp:HiddenField ID="X" runat="server" />
    <asp:HiddenField ID="Y" runat="server" />
    <asp:HiddenField ID="W" runat="server" />
    <asp:HiddenField ID="H" runat="server" />
    <br />
    <asp:Button ID="btnCrop" runat="server" Text="Crop Picture" CssClass="accentheader"
        OnClick="btnCrop_Click" />
</div>
</form>


<script type="text/javascript">
jQuery(document).ready(function () {
    var jcrop_api;
    jcrop_api = $.Jcrop('#imgProfileImage');
    jcrop_api.setSelect([0, 0, 100, 100]);
    jcrop_api.enable();

    jQuery('#imgProfileImage').Jcrop({
        onSelect: storeCoords
    });
});

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

Now its.... enter image description here

Solution

  • Try these steps:

    1. When you do 'Jcrop(element)', element should be an img, not a div or any other tag, so move your id="cropbox" attribute from div to img:

      <div    >
<!--  |________    -->
<!--           |    -->
    <img id="cropbox" src="..." />
</div>

    2. Specify width and height on .jcrop-handle class:

      .jcrop-handle{
      background-color:#333;
      border:1px #eee solid;
      font-size:1px; 
      width:7px;    //explicit width
      height:7px;   //explicit height
 }

    3. Enable resizing 'interactivity' handlers after setSelection:

       jcrop_api.setSelect([0,0,100,100]);  //default selection on page load
 jcrop_api.enable();    //enable resize interactivity

    Live demo