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({
         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 > 0)
{
    var file = context.Request.Files[0];
    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, 520, 450);
            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, 0, CropImage.Length))
    {
        ms.Write(CropImage, 0, 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(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);
    }
}

三、测试说明

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