jQuery插件综合应用(四)头像设置

一、操作流程

会员点击头像设置，弹出一个层，在层中，有上传图片的按钮，用户点击按钮上传图片，图片在服务器端按大小压缩保存(方便剪切)。保存后，在前端显示，然后用户可修剪图片。选择图片区域，点击提交，保存修剪后的图片，图片保存后在当前页面头像区域显示图片。

使用的插件有：弹出层使用lightbox_me插件，上传文件使用blueimp插件，切割图片使用Jcrop插件。
插件的使用方法可以看下面的博文：

网站开发常用jQuery插件总结(16)图片修剪插件Jcrop
网站开发常用jQuery插件总结(17)上传插件blueimp
网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me

在上面的三篇文章中，只是介绍了插件的使用。而在本文的测试中，与上面三个插件的使用是有区别的。主要区别在于
linghtbox_me:在弹出层后，需点击按钮关闭弹出层。
blueimp:上传后，对图片进行压缩。方便使用Jcrop修剪图片。
Jcrop:修剪图片时，动态显示缩略图。

测试用例图

二、代码实现

1.引用文件说明。主要是3个插件使用的文件。

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

<!--弹出层插件lightbox_me使用的插件-->

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

<!--blueimp上传插件使用的文件-->

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

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

<script type="text/javascript" src="js/jquery.iframe-transport.js"></script>

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

<!--修剪插件Jcrop使用的文件-->

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

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

2.插件样式说明。css主要用于页面布局。定义了一个弹出层的样式，其它的都非常简单。有兴趣的可以在下方下载”测试代码”。

Jcrop与lightbox_me插件使用的为默认样式。blueimp修改了默认样式，因为blueimp使用了bootstrap框架，所以在官方的demo中使用了bootstrap中的样式。在本次测试中，修改为自己的样式。主要代码

<div class="fileinput-button">

   <span><input type="button" value="上传图片" class="WhiteButton" id="UploadFile"/></span>

   <input id="fileupload" type="file" name="file"/>

</div>

按钮的样式，使用的自动生成的样式。

.WhiteButton {

    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

    box-shadow:inset 0px 1px 0px 0px #ffffff;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));

    background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);

    background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);

    background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);

    background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);

    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);

    background-color:#ffffff;

    -moz-border-radius:6px;

    -webkit-border-radius:6px;

    border-radius:6px;

    border:1px solid #dcdcdc;

    display:inline-block;

    color:#666666;

    font-family:arial;

    font-size:15px;

    font-weight:bold;

    padding:6px 24px;

    text-decoration:none;

    text-shadow:0px 1px 0px #ffffff;

}

.WhiteButton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));

    background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);

    background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);

    background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);

    background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);

    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);

    background-color:#f6f6f6;

}

.WhiteButton:active {

    position:relative;

    top:1px;

}

3.js代码说明。js代码主要涉及到弹出层，上传图片，修剪图片。

弹出层

$('#operation-box').lightbox_me({

    centered: true,

    closeClick: false, //必须点击按钮关闭

    closeEsc: true,

    onLoad: function () {

        $('#operation-box').find('input:first').focus();

    }

});

//关闭弹出层

$('#Cancel').click(function () {

    $('#operation-box').trigger('close');

});

上传图片

$('#fileupload').fileupload({

    replaceFileInput: false,

    dataType: 'json',

    url: '<%=ResolveUrl("upload.ashx") %>',

    add: function (e, data) {

        var re = /^.+\.((jpg)|(png))$/i;

        $.each(data.files, function (index, file) {

            if (re.test(file.name)) {

                data.submit();

            }

        });

    },

    done: function (e, data) {

        $.each(data.result, function (index, file) {

            $('#result').html();

            picFile = 'images/' + file;

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

            //判断浏览器.ie浏览器直接绑定

            //其它浏览器，判断图片是否加载完毕。

            if ($.browser.msie) {

                bindJcrop(picFile);

            } else {

                if ($('#picresult').load(function () {

                    bindJcrop(picFile);

                }));

            }

            $('#picresult').load(function () {

                //alert('111');

            });

        });

    }

});

function bindJcrop(picPath) {

    picHeight = $('#picresult').height();

    picWidth = $('#picresult').width();

    $('#preview').attr('src', picPath);

    if ($("#preview").is(":visible") == false) {

        $('#preview').show();

    }

    $('#picresult').Jcrop({

        onChange: storeCoords,

        onSelect: storeCoords,

        aspectRatio: 1

    });

    $('#oper').html('<input type="button" value="修剪头像" class="WhiteButton" onclick="toCrop()"/>');

}

在上传图片后，初始化修剪功能时。遇到了问题。使用$(id).ready(function({})) chrome，firefox无法使用修剪功能，ie8可以。使用$(id).load(function({})) chrome,firefox可以使用修剪功能，但ie8不可以。主要原因是因为图片是否加载完毕，picHeight与picWidth必须赋值成功。所以我使用$.browser.msie判断浏览器类型，然后再初始化修剪功能。

修剪图片

//显示缩略图使用，并记录坐标与修剪图片的高与宽。

function storeCoords(c) {

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

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

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

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

    //以下是动态显示缩略图使用

    var rx = 150 / c.w;

    var ry = 150 / c.h;

    var x, y, w, h;

    //picWidth,picHeight为上传图片后的高度、宽度。

    //必须使用。

    w = Math.round(rx * picWidth);

    h = Math.round(ry * picHeight);

    x = Math.round(rx * c.x);

    y = Math.round(ry * c.y);

    $('#preview').css({

        width: w + 'px',

        height: h + 'px',

        marginLeft: '-' + x + 'px',

        marginTop: '-' + y + 'px'

    });

};

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;

    }

    //ajax操作，提交数据到后台，修剪图片。

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

    $.ajax({

        type: "POST",

        url: "crop.ashx",

        data: params,

        success: function (html) {

            $('#portrait').attr('src', html);

        }

    });

}

4.asp.net代码说明。主要用于上传图片，修剪图片。

上传图片

if (context.Request.Files.Count > )

{

    var file = context.Request.Files[];

    if (Path.GetExtension(file.FileName).ToLower() != ".jpg" || Path.GetExtension(file.FileName).ToLower() != "png")

    {

        string path = context.Server.MapPath("~/images");

        string filename = Path.Combine(path, file.FileName);

        //file.SaveAs(filename);

        using (System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream))

        {

            //将图片尺寸压缩在保存，宽度最大为450，高度最大为520

            //按比例压缩

            PicHelper helper = new PicHelper(image, , );

            helper.CreateNewPic(filename);

        }

        //返回上传后的图片地址

        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

        var result = new { name = file.FileName };

        context.Response.Write(serializer.Serialize(result));

    }

}

修剪图片

public void ProcessRequest(HttpContext context)

{

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

    string img = context.Server.MapPath(context.Request.Form["filepath"]);

    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, , CropImage.Length))

    {

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

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

        {

            string saveTo = string.Format("images/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(, , 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);

    }

}

三、测试说明

开发环境:vs2010
测试环境 chrome,firefox,ie8+
测试代码下载地址：http://www.1100w.com/wp-content/uploads/2013/10/PortraitSetting.rar