如何显示图片裁剪区域答案

【问题标题】：How to show picture cropping area如何显示图片裁剪区域
【发布时间】：2012-07-18 07:52:12
【问题描述】：

借助本文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);
};

现在它....

【问题讨论】：

标签： c# javascript jquery asp.net jcrop

【解决方案1】：

试试这些步骤：

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


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

在.jcrop-handle 类上指定width 和height：

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

在setSelection 之后启用调整“交互”处理程序的大小：

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

Live demo

【讨论】：

@MuhammadAkhtar 尝试将所有与 Jcrop 相关的代码放在 document.ready 处理程序中，同样放在 this jsfiddle 中
@MuhammadAkhtar 此外，如果jcrop-handle 类确实存在于css/jquery.Jcrop.min.css 中，请将其删除，否则您将设计同一类两次。
是的，感谢您的帮助。现在所有问题都解决了，实际上是什么问题，jquery.jcrop 问题版本是旧的。

【解决方案2】：

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

所以您希望它在页面加载时设置默认尺寸。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：