jquery 上传图片自由截取

为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。本文主要是利用jQuery的imgAreaSelect插件实现。

首先引入三个文件：

 <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
            });

设置所选区域大小值，与坐标：

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);
        }

　　实现代码：前台

            //上传图片
            $("#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("请先截取图片");
                    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);
                        }
                    }
                });
            });

　　实现代码后台：

 /// <summary>
        /// 上传图片
        /// </summary>
        public void UpPic()
        {
            try
            {
                var file = Request.Files["File1"];
                if (file.ContentLength == 0)
                {
                    ReWrite("Error","请选择文件");
                    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);
        }

　

 

转载请注明出处：http://www.cnblogs.com/Xingsoft-555/