Question

我已经在本文Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET的帮助下成功实现了图像裁剪解决方案。它工作正常，但在页面加载时，我想显示默认的裁剪区域。就像下面的图片一样。我的意思是当打开包含用于裁剪的图片的页面时，它显示默认坐标，但是，用户可以编辑这些。

我想突出显示100x100坐标。

这是一个封闭的解决方案http://jsfiddle.net/kLbVM/3/在这个例子中，当我们点击按钮时它突出显示坐标，但是当页面加载时我需要相同的东西。

我正在寻找同样的事情，就像在 linkedin.com

中一样

enter image description here

修改：这是我的页面来源......

<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);
};

现在...... enter image description here

Answer 1

尝试以下步骤：

当您执行“Jcrop(element)”时，element应该是img，而不是div或任何其他标记，请移动id="cropbox"从div到img的属性：
```
<div    >


    <img id="cropbox" src="..." />
</div>
```

在width课程中指定height和.jcrop-handle：

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

在setSelect离开后调整“交互”处理程序的大小：

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

Live demo

Answer 2

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

因此，您希望它在页面加载时设置默认尺寸。

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

Answer 3

将代码放在表单的“已显示”事件中，它将执行您需要的操作。假设您使用.Net表单来显示页面，那就是。我认为在文档加载完成后会调用一个事件，如果您需要首先从Internet加载页面，可以使用该事件将代码放入。

在任何情况下，无论实际平台如何，由于代码在一个事件（按钮点击）中工作，它将在相应的表单/文档事件 >加载之后显示。它不适用于“加载”事件。

如何显示图片裁剪区域

3 个答案: