WebMatrix - 使用JCROP测试Webimage Helper

我的原始JCROP文章查看在ASP.NET中的上传图像已被证明是我写的最受欢迎的编码文章,具有比任何其他的更多观点和评论。在网页上下文中重新讨论奖金,让我有机会看看WebImage Helper,并了解如何更容易地进行上传和裁剪图像。

只是为了回顾, jcrop. 是jQuery插件,允许用户选择要保留的图像区域。它实际上并没有执行任何裁剪。该任务由服务器端代码执行。下面的简单示例将提供用户可以上传图像文件的手段,选择裁剪后要保留的区域,然后显示所得到的裁剪图像。有几件事需要这个工作。显然,最新的jQuery文件与JCROP文件一起。下载JCROP ZIP时,您将获得一些文件夹。其中一个被称为"css"。在WebMatrix中创建一个站点(选择空网站模板),请从那里复制CSS文件,以便使用要用于这些类型的文件的网站文件夹。您还需要将JCROP.GIF图像文件复制到您计划用于网站图像的文件夹中。完成此操作后,打开jQuery.jcrop.css文件并在第8行上修改URL以指向jcrop.gif的位置。

您需要的下一件事是FileUpload Helper。在Beta 2中,已将核心网页程序集移出到从包下载管理器中提供的Microsoft Helpers包中。添加一个名为default.cshtml的文件并在浏览器中运行该文件。然后将浏览器地址栏中的URL更改为指向_admin并按Enter键。您将获得包管理工具的登录屏幕:

输入您不会忘记的密码,并不容易猜测,然后选择安装Microsoft-Web-alervers 1.0包。如果全部进行计划,您应该看到已安装包的确认:

创建一个文件夹并调用它"Shared"。这是布局页面将使用以下代码的位置:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jcrop. Sample</title>
        <script src="@Href("~/Scripts/jquery-1.4.2.min.js")" type="text/javascript"></script>
        <script src="@Href("~/Scripts/jquery.Jcrop.min.js")" type="text/javascript"></script>
        <link rel="stylesheet" href="@Href("~/Styles/StyleSheet.css")" type="text/css" />
        <link rel="stylesheet" href="@Href("~/Styles/jquery.Jcrop.css")" type="text/css" />

    </head>
    <body>
        <h1>jcrop. Example</h1>
        @RenderBody()
    </body>
</html>

接下来,清除您之前创建的default.cshtml文件中的所有标记,然后用它替换为启动:

@{
    Layout = "/Shared/Layout.cshtml";
    if(Request["行动"].IsEmpty() && Request.Files.Count == 0){
        @RenderPage("~/Upload.cshtml");   
    }

}

上面的代码指向名为upload.cshtml的不存在文件。这需要创建:

<p>Upload your image</p>
@FileUpload.GetHtml(
    allowMoreFilesToBeAdded: false
)

默认文件中的前一段代码.CSHTML检查以查看是否上传有任何文件,或者是一个调用的按钮"action"已被单击(更稍后的更多),如果这些内容中都没有发生,则在Upload.cshtml中将显示文件上传。一旦用户选择要上载的图像,页面将发布回服务器。此时,Request.files.count将不再相等为1,因此Default.cshtml中的代码需要延伸以考虑此条件:

    if(Request.Files.Count > 0){
        var image = WebImage.GetImageFromRequest();
        if(image != null){
            var imagePath = @"Uploads/" + Path.GetFileName(image.FileName);
            image.Save(@"~/" + imagePath);
            Page.Image = imagePath;
            Page.Height = image.Height;
            Page.Width = image.Width;
        }
        @RenderPage("~/Crop.cshtml");
    }

在这里,我们可以在工作中看到图像助手。 getImageFromRequest()方法使从请求中获取图像文件.Form集合非常简单。从那里。代码设置一个文件路径以将映像保存到,抓取其高度和宽度,并将其与文件名一起传递给croc.cshtml:

@{
    var 最佳 = Convert.ToInt32(Page.Height*0.1);
    var 剩下 = Convert.ToInt32(Page.Width*0.1);
    var 正确的 = Convert.ToInt32(Page.Width*0.9);
    var 底部 = Convert.ToInt32(Page.Height*0.9);
}
<img id="crop" src="@Page.Image" />
<form 行动="/" method="post">
    <input type="hidden" id="最佳" name="最佳" value="@最佳" /> 
    <input type="hidden" id="剩下" name="剩下" value="@剩下" /> 
    <input type="hidden" id="底部" name="底部" value="@底部" /> 
    <input type="hidden" id="正确的" name="正确的" value="@正确的" />
    <input type="hidden" id="image" name="image" value="@Page.Image" />
    <input type="submit" name="行动" value="Crop" />
</form>
<script type="text/javascript">
  $(function() {
    jQuery('#crop').Jcrop({
      onSelect: storeCoords,
      setSelect: [@最佳,@剩下,@正确的,@底部]
    });
  });
 
  function StoreCoords.(c) {
    $('#top').val(c.y);
    $('#left').val(c.x);
    $('#bottom').val(c.y2);
    $('#right').val(c.x2);
  };
</script>

此页面的工作是使用裁剪显示上载的图像,以便在裁剪后,用户可以选择要保持的图像。使用JCROP下载附带的样本图像之一,它应该看起来像这样:

如果未在预选区域周围获取虚线边框,请检查jQuery.jcrop.css文件以确保将URL指向jcrop.gif指向正确的位置。您可以检查本文的下载中的示例。代码的第一部分 - 顶部的剃刀部分 - 以前文件提供的图像的高度和宽度,然后使用该区域来计算预选的区域。这些值传递给 setselect. 选择所选区域的选项。裁剪器的位置也用作隐藏字段的默认值,以便如果用户对所选区域感到满意并且不会更改裁剪器,则将值传递到下一页。否则,如果用户调整裁剪区域,则 onelect. 触发事件处理程序,并更新隐藏的字段值以反映新的选定区域。图像文件名也包含为隐藏字段,以便单击裁剪按钮时可以引用正确的图像,并且表单提交回服务器。另外两个值可用 StoreCoords. 功能。他们是 C.W.C.H.,这是所选区域的宽度和高度。在这个例子中没有使用它们。

您会注意到提交按钮已被调用 行动。如果单击已单击,则Default.cshtml中的第一个条件不是真的,因为没有文件寄回,第二个条件也不是真的。这意味着需要管理第三种条件,这会负责裁剪图像,这会被添加到default.cshtml:

    if(Request["行动"] == "Crop"){
        WebImage image = new WebImage(@"~/" + Request["image"]);
        var height = image.Height;
        var width = image.Width;
        var 最佳 = Request["最佳"].AsInt();
        var 剩下 = Request["剩下"].AsInt();
        var 底部 = Request["底部"].AsInt();
        var 正确的 = Request["正确的"].AsInt();
        image.Crop(top, left, height - bottom, width - right);
        var newFileName = Guid.NewGuid().ToString() + "_" +
                Path.GetFileName(image.FileName);
        Page.Image = "Uploads/" + newFileName;
        image.Save(@"~/" + Page.Image);
        @RenderPage("~/Cropped.cshtml");
    }

同样,使用WebImage帮助程序,这次将图像从文件系统加载。各种坐标与原始图像的宽度和高度结合使用,以计算裁剪图像的产生尺寸,以及裁剪的位置。这些被传递给另一个WebImage方法 - 裁剪()以执行实际裁剪。裁剪版本使用新的文件名保存,因此原始版本仍然完好无损。然后在croced.cshtml中呈现结果:

<p>Your image has been cropped</p>
<img id="crop" src="@Page.Image" />

 

如果您检查管理实际裁剪的代码 来源文章,您可以看到WebImage.crop方法急剧简化事物。我唯一发现关于作物()方法的困惑是它预期的值。调用参数 最佳, 剩下, 底部, 正确的。这一切的表明,来自他们自己来自jcrop的x,y,x2和y2值就足够了。然而,进一步的研究表明,底部和右值以一点是奇怪的方式计算。例如,通过拍摄左和右值来计算新图像的宽度,并将其与原始宽度的那些中减去。高度也是如此。换句话说,裁剪方法扣除了您不受原始的比特,并计算其余部分,而不是计算您想要保留的位中的点之间的距离。

下载样本