CODEWITHSUNDEEP
c#javascriptjqueryasp.netjcrop
Muhammad Akhtar
Muhammad Akhtar

Reputation: 52241

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

Upvotes: 4

Views: 2296

Answers (3)

ThunderGr
ThunderGr

Reputation: 2367

Put the code on the "Shown" event of the form, and it will do what you need. Assuming you are using a .Net form to show the page, that is. I think that there is an event that is called after a document has finished loading, which can be used to put the code in, if you need to load the page from the internet, first.

At any case, and whatever the actual platform, since the code works in an event(button click) it will work in the respective Form/Document event after it has been loaded and before is shown. It will not work in a "Load" event.

Upvotes: 0

Engineer
Engineer

Reputation: 48793

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

Upvotes: 8

Spicy Koala
Spicy Koala

Reputation: 557

http://jsfiddle.net/kLbVM/4/

So you want it to set the default dimensions on page load. 

$(function(){
   jcrop_api.setSelect(getDimensions());
});

Upvotes: 2

Related Questions