Jcrop 裁剪图像答案

【问题标题】：Jcrop crop imageJcrop 裁剪图像
【发布时间】：2012-05-01 04:00:33
【问题描述】：

我正在尝试使用 Jcrop 裁剪图像。它不起作用，我不断收到异常“输入字符串格式不正确”。

<script type="text/javascript">

jQuery(document).ready(function () {
    jQuery('#crop').Jcrop({
        onSelect: updateCoords
    });
});

function updateCoords(c) {
    jQuery('#X').val(c.x);
    jQuery('#Y').val(c.y);
    jQuery('#W').val(c.w);
    jQuery('#H').val(c.h);
};

<asp:Button ID="Submit" runat="server" Text="Crop" 
onclick="Submit_Click" />        

<asp:Image ID="Image" runat="server" Visible="False" />        
 <img src="Content/UploadedImage/Image.jpg" id="crop" alt=""/>

<asp:HiddenField ID="X" runat="server" />        
<asp:HiddenField ID="Y" runat="server" />        
<asp:HiddenField ID="W" runat="server" />        
<asp:HiddenField ID="H" runat="server" />

试图获取坐标

protected void Submit_Click(object sender, EventArgs e)
{
    if (IsPostBack)
    {

        int x = Convert.ToInt32(X.Value);
        int y = Convert.ToInt32(Y.Value);
        int w = Convert.ToInt32(W.Value);
        int h = Convert.ToInt32(H.Value);

【问题讨论】：

您是否检查过您的 html 字段的 ID？或者至少在回发时在 X.Value、Y.Value... 中传递了哪些值？我猜你必须在 HiddenField 控件中包含 ClientIDMode="Static"。

标签： asp.net crop jcrop

【解决方案1】：

这个代码就是我用的

在客户端我有这个.. 但我不认为这会造成问题

var updateCoords = function(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

在服务器“upload.ashx”通用处理程序上，我使用

获取尺寸

  Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

            Dim x As Integer = Integer.Parse(context.Request("x"))
            Dim y As Integer = Integer.Parse(context.Request("y"))
            Dim w As Integer = Integer.Parse(context.Request("w"))
            Dim h As Integer = Integer.Parse(context.Request("h"))

除了你在哪里得到错误？在客户端还是服务器上？是什么扔的？

看起来您正试图在回发后获取表单值，这些值不再存在，因为此时页面已经重新初始化而没有其原始值..因为这就是 .NET 页面呈现过程的工作方式。

因此，您要么必须将变量保存到内存中的 Session，将值回发到自身并使用 Request.Form 检索它们，要么使用 GET 方法发送数据并像我一样检索值

【讨论】：

【解决方案2】：

我遇到了同样的问题，并解决了这个问题：

var updateCoords = function(c) {

    $('#x1').val(Math.round(c.x));
    $('#y1').val(Math.round(c.y));
    $('#x2').val(Math.round(c.x2));
    $('#y2').val(Math.round(c.y2));
    $('#w').val(Math.round(c.w));
    $('#h').val(Math.round(c.h));
};

【讨论】：

【解决方案3】：

jQuery('#X').val(Math.round(c.x));
jQuery('#Y').val(Math.round(c.y));
jQuery('#W').val(Math.round(c.w));
jQuery('#H').val(Math.round(c.h));

【讨论】：

不够详细。