C# 如何显示图片裁剪区域_C#_Javascript_Jquery_Asp.net_Jcrop

C# 如何显示图片裁剪区域

c# javascript jquery asp.net

C# 如何显示图片裁剪区域,c#,javascript,jquery,asp.net,jcrop,C#,Javascript,Jquery,Asp.net,Jcrop,在本文的帮助下，我成功地实现了图像裁剪解决方案。它工作正常，但在页面加载时，我想显示默认的裁剪区域。如下图所示。我的意思是，当打开包含要裁剪的图片的页面时，它会显示默认坐标，但用户可以编辑这些坐标我想突出显示100x100坐标在本例中，这是一个封闭的解决方案，当我们单击按钮时，它会高亮显示坐标，但我需要相同的东西，当页面加载时我也在寻找同样的东西，就像在linkedin.com上一样编辑：这是我的页面来源 <head runat="server"> <styl

在本文的帮助下，我成功地实现了图像裁剪解决方案。它工作正常，但在页面加载时，我想显示默认的裁剪区域。如下图所示。我的意思是，当打开包含要裁剪的图片的页面时，它会显示默认坐标，但用户可以编辑这些坐标

我想突出显示100x100坐标

在本例中，这是一个封闭的解决方案，当我们单击按钮时，它会高亮显示坐标，但我需要相同的东西，当页面加载时

我也在寻找同样的东西，就像在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>


#imgProfileImage
{
宽度：自动；
高度：自动；
}
.jcrop手柄
{
背景色：#333；
边框：1px#eee实心；
字号：1px；
宽度：7px；
高度：7px；
}


jQuery（文档）.ready（函数（）{
var jcrop_api；
jcrop_api=$.jcrop（“#imgProfileImage”）；
jcrop_api.setSelect（[0,01001100]）；
jcrop_api.enable（）；
jQuery（'#imgProfileImage'）.Jcrop({
onSelect:storeCoords
});
});
函数storeCoords（c）{
jQuery（'#X'）.val（c.X）；
jQuery（'#Y'）.val（c.Y）；
jQuery（'#W'）.val（c.W）；
jQuery（'#H'）.val（c.H）；
};

现在是。。。。

因此，您希望它在页面加载时设置默认维度

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

尝试以下步骤：

执行“

Jcrop（element）

”操作时，

element

应该是

img

，而不是

div

或任何其他标记，因此将

id=“cropbox”

属性从

div

移动到

img

：

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

在

setSelect

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

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

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

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

@MuhammadAkhtar尝试将所有与Jcrop相关的代码放入

文档中。同样，如果Jcrop handle
类确实存在于css/jquery.Jcrop.min.css中，请将其删除，否则您将对同一类进行两次样式设置。是的，谢谢您的帮助。现在所有的问题都解决了，实际上是什么问题，jquery.jcrop问题版本是旧的。
.jcrop-handle{
      background-color:#333;
      border:1px #eee solid;
      font-size:1px; 
      width:7px;    //explicit width
      height:7px;   //explicit height
 }

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