网站开发常用jQuery插件总结(14)图片修剪插件Jcrop

一、插件功能

用于对图片进行修剪。但是在使用Jcrop时，还需要配合服务器端开发语言（如asp.net,php等）使用。

二、官方地址

http://deepliquid.com/content/Jcrop.html
在官方地址中有5个demo,在这5个demo中，有3个带有代码说明。有1个提供了完整的实例，前端(js)与后台（php）交互，修剪图片并显示。而本次测试时，后台使用的是asp.net来修剪图片。在文章的下面有完整的测试代码可供下载。
官方Demo也可以下载，但是下载下来的文件包含js代码很多，作者可能是为了演示jcrop的完整功能，所以包含了尽可能多的代码。其实我们在使用时，应该只会涉及到很简单的一部分。
测试效果截图：

三、插件使用

1.引用文件

<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.Jcrop.js"></script>

2.Css样式文件。测试时使用插件的默认样式，了解详细的样式定义可以看jquery.Jcrop.css。

3.Js代码。在官方Event Handler Demo中，使用了两个事件。分别为onChange,onSelect。OnChange事件在选取修剪范围时触发，onSelect在选取完毕后触发。本次测试只使用了onSelect事件。
如果需要动态显示缩略图，可以看官方提供的Thumbnail Demo。而且在这个Demo中，也提供了一种思路，那就是如何修剪等比例缩放的图片（按百分比寻找坐标位置）。在使用Jcrop修剪图片时，如果图片按比例缩小了，那么就需要按比例修改坐标，坐标为x(鼠标按下时的x坐标)，y(鼠标按下时的y坐标)，w(宽度)，h(高度)，都要替换为原图的坐标。但最简单的方式还是在上传图片的时候，就将图片按比例压缩，然后显示上传后的原图。
而本次测试使用的js代码主要分为两部分。
第一部分，修剪图片时保存坐标

$('#portrait').Jcrop({

   onSelect: storeCoords

});

function storeCoords(c) {

    $('#x').val(c.x);

    $('#y').val(c.y);

    $('#w').val(c.w);

    $('#h').val(c.h);

};

第二部分，以ajax的方式提交坐标到后台

function toCrop() {

    var x = $('#x').val();

    var y = $('#y').val();

    var w = $('#w').val();

    var h = $('#h').val();

    if ($.trim(x) == "" || $.trim(y) == "" || $.trim(w) == "" || $.trim(h) == "") {

        console.log("数据不能为空!");

        return;

    }

    var params="x="+x+"&y="+y+"&w="+w+"&h="+h;

    $.ajax({

        type: "POST",

        url: "crop.ashx",

        data: params,

        success: function (html) {

            console.log(html);

            //显示返回的图片路径

            $("#result").html('<img src="' + html + '"/>');

        }

    });

}

4.html代码。在html代码中，需要有元素保存第3步中提到的坐标，本次测试使用text保存坐标。

<img src="imgs/1.jpg"  id="portrait"/>

<br /><br />

<p id="result"></p>

<p><label for="x">x坐标</label><input type="text" id="x" /></p>

<p><label for="y">y坐标</label><input type="text" id="y" /></p>

<p><label for="w">宽度</label><input type="text" id="w" /></p>

<p><label for="h">高度</label><input type="text" id="h" /></p>

<p><input type="button" value="切割" id="btnCrop" /></p>

5.asp.net代码。通过ajax将坐标传入后台ashx文件，然后修剪原图并保存修剪后的图片，然后将修剪后的图片路径返回给前端，前端显示。

public void ProcessRequest(HttpContext context)

{

    context.Response.ContentType = "text/plain";

    string img = context.Server.MapPath("~/imgs/1.jpg");

    int w = Convert.ToInt32(context.Request.Form["w"]);

    int h = Convert.ToInt32(context.Request.Form["h"]);

    int x = Convert.ToInt32(context.Request.Form["x"]);

    int y = Convert.ToInt32(context.Request.Form["y"]);

    byte[] CropImage = CropImg(img, w, h, x, y);

    using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))

    {

        ms.Write(CropImage, 0, CropImage.Length);

        using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))

        {

            string saveTo = string.Format("imgs/crop/{0}.jpg", Guid.NewGuid().ToString().Replace("-",""));

            CroppedImage.Save(context.Server.MapPath(saveTo), CroppedImage.RawFormat);

            context.Response.Write(saveTo);

        }

    }

}

static byte[] CropImg(string img, int width, int height, int x, int y)

{

    try

    {

        using (SD.Image OriginalImage = SD.Image.FromFile(img))

        {

            using (SD.Bitmap bmp = new SD.Bitmap(width, height))

            {

                bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);

                using (SD.Graphics graphic = SD.Graphics.FromImage(bmp))

                {

                    graphic.SmoothingMode = SmoothingMode.AntiAlias;

                    graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;

                    graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;

                    graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, width, height), x, y, width, height, SD.GraphicsUnit.Pixel);

                    MemoryStream ms = new MemoryStream();

                    bmp.Save(ms, OriginalImage.RawFormat);

                    return ms.GetBuffer();

                }

            }

        }

    }

    catch (Exception Ex)

    {

        throw (Ex);

    }

}

测试环境+开发环境

测试环境：chrome,firefox,ie9(在ie下使用时，请注销掉console.log语句)
开发环境：vs2010

下载测试代码