如何显示图片裁剪区域

Question

如何显示图片裁剪区域

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

现在是这样的...... 在这里输入图片描述

- Muhammad Akhtar

3个回答

2

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

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

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

- Spicy Koala

0

将代码放在窗体的“Shown”事件中，它将执行您所需的操作。假设您正在使用 .Net 窗体来显示页面。

我认为有一个事件在文档加载完成后被调用，可以用来放置代码，如果您需要从互联网加载页面的话。

无论实际平台如何，由于代码在事件（按钮单击）中工作，因此它将在相应的窗体/文档事件之后被加载并在显示之前工作。它不会在“Load”事件中工作。

- ThunderGr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Engineer · Accepted Answer

尝试以下步骤：

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

演示现场