jquery 上传图片自由截取

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

首先引入三个文件：

 <script src="<%:Url.Content("~/UI/Scripts/jquery-1.8..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/

巴特西

jquery 上传图片自由截取

最新文章

热门文章