c# - 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 / 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

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

I want to highlight 100x100 coordinates.

This is a closed solution http://jsfiddle/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.

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

Share Improve this question edited Jul 21, 2012 at 12:11 asked Jul 19, 2012 at 7:08 Muhammad Akhtar 52.2k37 gold badges139 silver badges191 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 8 +50

Try these steps:

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

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
 }

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

http://jsfiddle/kLbVM/4/

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

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

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

c# - How to show picture cropping area - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)