如何显示图片裁剪区域
Muh*_*tar 4 javascript c# asp.net jquery jcrop
我在本文的帮助下成功实现了图像裁剪解决方案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);
};
现在......
请尝试以下步骤:
当你这样做时
Jcrop(element),element应该是一个img,而不是一个div或任何其他标签,所以将你的id="cropbox"属性从:移动div到img:
Run Code Online (Sandbox Code Playgroud)<div > <!-- |________ --> <!-- | --> <img id="cropbox" src="..." /> </div>指定
width与height上.jcrop-handle类:
Run Code Online (Sandbox Code Playgroud).jcrop-handle{ background-color:#333; border:1px #eee solid; font-size:1px; width:7px; //explicit width height:7px; //explicit height }在
setSelect离子后启用"交互"处理程序的大小调整:
Run Code Online (Sandbox Code Playgroud)jcrop_api.setSelect([0,0,100,100]); //default selection on page load jcrop_api.enable(); //enable resize interactivity