jQuery插件綜合應用(四)頭像設置

時間 2019-12-12

原文原文鏈接

1、操做流程

會員點擊頭像設置，彈出一個層，在層中，有上傳圖片的按鈕，用戶點擊按鈕上傳圖片，圖片在服務器端按大小壓縮保存(方便剪切)。保存後，在前端顯示，而後用戶可修剪圖片。選擇圖片區域，點擊提交，保存修剪後的圖片，圖片保存後在當前頁面頭像區域顯示圖片。javascript

使用的插件有：彈出層使用lightbox_me插件，上傳文件使用blueimp插件，切割圖片使用Jcrop插件。
插件的使用方法能夠看下面的博文：css

網站開發經常使用jQuery插件總結(16)圖片修剪插件Jcrop
網站開發經常使用jQuery插件總結(17)上傳插件blueimp
網站開發經常使用jQuery插件總結(二）彈出層插件Lightbox_mehtml

在上面的三篇文章中，只是介紹了插件的使用。而在本文的測試中，與上面三個插件的使用是有區別的。主要區別在於
linghtbox_me:在彈出層後，需點擊按鈕關閉彈出層。
blueimp:上傳後，對圖片進行壓縮。方便使用Jcrop修剪圖片。
Jcrop:修剪圖片時，動態顯示縮略圖。前端

測試用例圖

java

2、代碼實現

1.引用文件說明。主要是3個插件使用的文件。jquery

<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主要用於頁面佈局。定義了一個彈出層的樣式，其它的都很是簡單。有興趣的能夠在下方下載」測試代碼」。web

Jcrop與lightbox_me插件使用的爲默認樣式。blueimp修改了默認樣式，由於blueimp使用了bootstrap框架，因此在官方的demo中使用了bootstrap中的樣式。在本次測試中，修改成本身的樣式。主要代碼ajax

<div class="fileinput-button">
   <span><input type="button" value="上傳圖片" class="WhiteButton" id="UploadFile"/></span>
   <input id="fileupload" type="file" name="file"/>
</div>

按鈕的樣式，使用的自動生成的樣式。chrome

.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代碼主要涉及到彈出層，上傳圖片，修剪圖片。json

彈出層

$('#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 > 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);
    }
}