4

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

我想突出显示 100x100 坐标。

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

我正在寻找同样的东西，就像在linkedin.com

在此处输入图像描述

编辑：这是我的页面源...

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

现在它.... 在此处输入图像描述

4

3 回答 3

8

尝试以下步骤：

  1. 当你做' Jcrop(element)'时，element应该是一个img，而不是一个div或任何其他标签，所以将你的id="cropbox"属性从移动div到img：

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

  2. 指定width和类height：.jcrop-handle

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

  3. setSelect在离子之后启用调整“交互”处理程序的大小：

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

现场演示

于 2012-07-21T08:33:48.037 回答
2

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

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

$(function(){
   jcrop_api.setSelect(getDimensions());
});
于 2012-07-21T07:33:29.873 回答
0

将代码放在表单的“显示”事件上，它会做你需要的。假设您正在使用 .Net 表单来显示页面，也就是说。我认为在文档加载完成后会调用一个事件，如果您需要先从 Internet 加载页面，可以使用该事件将代码放入其中。

在任何情况下，无论实际平台如何，由于代码在事件（按钮单击）中工作，因此在加载后和显示之前，它将在相应的 Form/Document 事件中工作。它在“加载”事件中不起作用。

于 2012-07-21T10:31:47.757 回答