jquery 上傳圖片自由截取

為了使用戶能自定義個(gè)人頭像，需要提供一個(gè)對(duì)上傳圖片的截圖功能，當(dāng)前很多網(wǎng)站特別是SNS類網(wǎng)站都提供這樣的功能，非常實(shí)用。本文主要是利用jQuery的imgAreaSelect插件實(shí)現(xiàn)。

首先引入三個(gè)文件：

 <script src="<%:Url.Content("~/UI/Scripts/jquery-1.8.2.min.js") %>"></script>  
<link href='<%:Url.Content("~/UI//CSS/imgareaselect-default.css") %>' rel="stylesheet" />
    <script src='<%:Url.Content("~/UI/Scripts/jquery.imgareaselect.pack.js")%>'></script>

前段主要代碼：初始化所選擇截取的圖片

 $('#photo').imgAreaSelect({
                aspectRatio: '1:1',
                handles: true
               , fadeSpeed: 200
               , onSelectChange: preview
                // , onSelectEnd: someFunction
            });

設(shè)置所選區(qū)域大小值，與坐標(biāo)：

function preview(img, selection) {
            if (!selection.width || !selection.height)
                return;

            var scaleX = 100 / selection.width;
            var scaleY = 100 / selection.height;

            $('#left').val(selection.x1);
            $('#top').val(selection.y1);
            $('#w').val(selection.width);
            $('#h').val(selection.height);
        }

　　實(shí)現(xiàn)代碼：前臺(tái)

            //上傳圖片
            $("#File1").change(function () {

                $("#formSave").ajaxSubmit({
                    type: "POST",
                    url: "/Home/UpPic/",
                    dataType: "json",
                    success: function (data) {
                        if (data.msg == "OK") {
                            $("#photo").attr("src", data.path)
                        } else {
                            alert(data.msg);
                        }
                    }
                });
            });

            //剪切后保存頭像
            $("#btnSaveImg").click(function () {

                if ($('#left').val() == "") {
                    alert("請(qǐng)先截取圖片");
                    return;
                }

                $("#formSave").ajaxSubmit({
                    type: "POST",
                    url: "/Home/SavePic/",
                    dataType: "json",
                    success: function (data) {
                        if (data.msg == "OK") {
                            $("#photo").attr("src", data.path)
                            alert("保存成功！");
                        } else {
                            alert(data.msg);
                        }
                    }
                });
            });

　　實(shí)現(xiàn)代碼后臺(tái)：

 /// <summary>
        /// 上傳圖片
        /// </summary>
        public void UpPic()
        {
            try
            {
                var file = Request.Files["File1"];
                if (file.ContentLength == 0)
                {
                    ReWrite("Error","請(qǐng)選擇文件");
                    return;
                }
                if (file.ContentLength > 307200)
                {
                    ReWrite("Error","文件過大");
                    return;
                }

                int width = 0; int height = 0;

                using (Image originalImg = Image.FromFile(file.FileName))
                {
                    double bi = originalImg.Width / originalImg.Height;
                    if (bi > 1.6)
                    {
                        width = 600;
                        height = (int)(600 / bi);
                    }
                    else
                    {
                        height = 360;
                        width = (int)(360 * bi);
                    }
                }

                //w600 h360;
                string extensionName = System.IO.Path.GetExtension(file.FileName).ToLower();
                string fileName ="temp" + extensionName;

                string p = "/Images/" + fileName;
                string path = Server.MapPath("~" + p);
                // file.SaveAs(path);
                Session["path"] = "~" + p;
                CommonMethod.AutoMakeThumNail(file.FileName, path, width, height, PicThumNailModel.H);
                ReWrite("OK", p);
            }
            catch (Exception ex)
            {
                ReWrite("Error",ex.Message);
                return;
            }
        }

        public void SavePic()
        {
             
            
            string photo ="";
            if (Session["path"] != null)
            {
                photo = Session["path"].ToString();
            }
            else
            {
                photo = "~/Images/20140430172226.png";
            }
            photo = Server.MapPath(photo);
            using (Image originalImg = Image.FromFile(photo))
            {

                int imageWidth = originalImg.Width;
                int imageHeight = originalImg.Height;
                int cutTop = Int32.Parse(Request.Form["top"]);
                int cutLeft = Int32.Parse(Request.Form["left"]);
                int dropWidth = Int32.Parse(Request.Form["w"]);
                int dropHeight = Int32.Parse(Request.Form["h"]);
                ImageHelp imgHelp = new ImageHelp();

               // string picPath = CommonMethod.GetConfig("HeadPicPath");

                string extensionName = System.IO.Path.GetExtension(photo).ToLower();
                string picName =DateTime.Now.ToString("yyyyMMddHHmmssff") + extensionName;

                string pp = "/Images/" + picName;


                imgHelp.GetPart(photo, Server.MapPath("/Images/"), 0, 0, dropWidth, dropHeight, cutLeft, cutTop, imageWidth, imageHeight, picName);

             
                ReWrite("OK", pp);
            }
          //  DelPic(photo);
        }

轉(zhuǎn)載請(qǐng)注明出處：http://www.rzrgm.cn/Xingsoft-555/

posted @ 2014-05-23 21:30 Xingsoft 閱讀(15471) 評(píng)論(1) 收藏舉報(bào)

刷新頁面返回頂部

Xingsoft

每天進(jìn)步一點(diǎn)點(diǎn).........

jquery 上傳圖片自由截取

公告