12
2014
01

Asp.net 上传大小不变图片使用缩放大小和拖动图片来改变图片位置的切图

参考头像截图，js、css文件可以网上下载

前台代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>上传大小不变图片缩放的切图</title>
    <link href="Css/CutPhoto.css" type="text/css" rel="Stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="JS/jquery.easydrag.js" type="text/javascript"></script>
    <script src="JS/CutPhoto.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Step1() {
            $("#Step2Container").hide();
            $("#savephoto").hide();
        }
        function Step2() {
            $("#Step2Container").hide();
            $("#Step1Container").hide();
            $("#savephoto").show();
        }
        function CloseWind(photo) {
            if (photo != "") {
                opener.setValue(photo); //返回父窗体中的获取图片地址方法
             window.close();
            }
            else {
                alert("上传错误！");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 950px; margin:5px auto; border: 1px black solid;">
        <div class="left">
            <!--当前图片-->
            <div id="CurruntPicContainer">
                <div class="title">
                    <b>当前图片</b></div>
                <table>
                    <tr>
                        <td style="width: 505px; height: 355px;">
                            <div>
                                <asp:Image ID="imgphoto" runat="server" ImageUrl="Images/cut_default.jpg" Width="500px" Height="350px" />
                            </div>
                        </td>
                        <td valign="bottom" style="height: 179px">
                        </td>
                    </tr>
                </table>
                <div id="Step1Container">
                    <div class="title">
                        <b>更换图片</b></div>
                    <div id="uploadcontainer">
                        <div class="uploadtooltip">
                            请选择新的图片文件，文件需小于2MB，格式：.jpg或.gif</div>
                        <div class="uploaddiv">
                            <asp:FileUpload ID="fuPhoto" runat="server" ToolTip="选择图片" /></div>
                        <div class="uploaddiv">
                            <asp:Button ID="btnUpload" runat="server" Text="上 传" OnClick="btnUpload_Click" />
                        </div>
                    </div>
                </div>
            </div>
            <!--Step 2-->
        </div>
        <div class="right">
            <!--Step 1-->
            <div id="Step2Container">
                <div class="title">
                    <b>裁切所需图片</b></div>
                <div class="uploadtooltip">
                    您可以拖动图片或放大缩小图片以裁剪满意的图片</div>
                <div id="Canvas" class="uploaddiv">
                    <table id="Crop" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td style="height: 23px" colspan="3" class="Overlay">
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 22px" class="Overlay">
                            </td>
                            <td style="width: 250px; height: 175px; border-width: 1px; border-style: solid; border-color: white;">
                            </td>
                            <td style="width: 22px" class="Overlay">
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 23px" colspan="3" class="Overlay">
                            </td>
                        </tr>
                    </table>
                    <div style="position: relative; top: 0px; left: 0px;" id="IconContainer">
                        <asp:Image ID="ImageIcon" runat="server" ImageUrl="Images/blank.jpg" CssClass="imagePhoto"
                            ToolTip="" />
                    </div>
                </div>
                <div class="uploaddiv">
                    <table>
                        <tr>
                            <td id="Min">
                                <img alt="缩小" src="Images/_c.gif" onmouseover="this.src='Images/_c.gif';"
                                    onmouseout="this.src='Images/_h.gif';" id="moresmall" class="smallbig" />
                            </td>
                            <td>
                                <div id="bar">
                                    <div id="barchild" class="child" style="left: 49px; top: 1px">
                                    </div>
                                </div>
                            </td>
                            <td id="Max">
                                <img alt="放大" src="Images/c.gif" onmouseover="this.src='Images/c.gif';"
                                    onmouseout="this.src='Images/h.gif';" id="morebig" class="smallbig" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="uploaddiv">
                    <asp:Button ID="btn_Image" runat="server" Text="保存图片" OnClick="btn_Image_Click" />
                </div>
                <div style="display: none">
                    图片实际宽度：
                    <asp:TextBox ID="txt_width" runat="server" Text="1"></asp:TextBox><br />
                    图片实际高度：
                    <asp:TextBox ID="txt_height" runat="server" Text="1"></asp:TextBox><br />
                    距离顶部：
                    <asp:TextBox ID="txt_top" runat="server" Text="22"></asp:TextBox><br />
                    距离左边：
                    <asp:TextBox ID="txt_left" runat="server" Text="23"></asp:TextBox><br />
                    截取框的宽：<asp:TextBox ID="txt_DropWidth" runat="server" Text="500"></asp:TextBox><br />
                    截取框的高：<asp:TextBox ID="txt_DropHeight" runat="server" Text="350"></asp:TextBox><br />
                    放大倍数：
                    <asp:TextBox ID="txt_Zoom" runat="server"></asp:TextBox>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

后台代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack) return;
        if (!string.IsNullOrEmpty(Request.QueryString["Picurl"]))
        {
            //ImageDrag.ImageUrl = Request.QueryString["Picurl"];
            string path = Server.UrlDecode(Request.QueryString["Picurl"]);
            ImageIcon.ImageUrl = System.Configuration.ConfigurationManager.AppSettings["WebUrl"] + "Govment/Photo/" + path; //上传路径
            imgphoto.ImageUrl = System.Configuration.ConfigurationManager.AppSettings["WebUrl"] + "Govment/Photo/" + path;
        }
        else
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "step1", "<script type='text/javascript'>Step1();</script>");
        }
    }


    protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (fuPhoto.PostedFile != null && fuPhoto.PostedFile.ContentLength > 0)
        {
            if (fuPhoto.PostedFile.ContentLength < 2048000)
            {

                string ext = System.IO.Path.GetExtension(fuPhoto.PostedFile.FileName).ToLower();
                if (ext != ".jpg" && ext != ".jepg" && ext != ".bmp" && ext != ".gif")
                {
                    Response.Write("<script language=javascript>alert('上传的格式不正确！')</script>");
                    return; //notice user change file type
                }
                string filename = DateTime.Now.ToString("yyyyMMddHHmmss") + ext;
                // string path = CutPhotoUp.getUploadPhoto() + "\\" + filename; ;
                string path = Server.MapPath("Photo//");

                fuPhoto.PostedFile.SaveAs(path + filename);
                Response.Redirect("CutPhotoInfo.aspx?Picurl=" + Server.UrlEncode(filename));
            }
            else
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "step1", "<script type='text/javascript'>Step1();alert('上传的照片过大！请查看文件大小是否小于2M');</script>");
            }
        }
        else
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "step1", "<script type='text/javascript'>Step1();alert('请检查你是否选择了照片！');</script>");
        }
    }

    protected void btn_Image_Click(object sender, EventArgs e)
    {
        int imageWidth = Int32.Parse(txt_width.Text);
        int imageHeight = Int32.Parse(txt_height.Text);
        int cutTop = Int32.Parse(txt_top.Text);
        int cutLeft = Int32.Parse(txt_left.Text);
        int dropWidth = Int32.Parse(txt_DropWidth.Text);
        int dropHeight = Int32.Parse(txt_DropHeight.Text);
        //string savepath =CutPhotoUp.getEmployeePhoto();
        string savepath = Server.MapPath("Photo//");
        string filename = CutPhotoUp.SaveCutPic(ImageIcon.ImageUrl, savepath, 0, 0, dropWidth,
                                dropHeight, cutLeft, cutTop, imageWidth, imageHeight);

        this.imgphoto.ImageUrl = System.Configuration.ConfigurationManager.AppSettings["WebUrl"] + "Govment/Photo/" + filename;
        Page.ClientScript.RegisterStartupScript(this.GetType(), "step3", "<script type='text/javascript'>CloseWind( '" + filename + "');</script>");
    }

效果图：

Tags: asp.net  上传  图片  
发布:郑德才博客 | 分类:学习之路 | 评论:0 | 浏览:
« 上一篇下一篇 »

相关文章:

C#、Asp.Net 对比两个实体信息前后是否有所改变（结构相同和不相同）  (2016-9-2 20:24:29)

C#、Asp.Net 将一个实体对象转换为另一个实体对象（结构可以不一样）  (2016-9-2 19:14:5)

Asp.Net 常用时间计算  (2016-3-16 23:29:20)

【C#、Asp.Net 工具类大全】图片通用操作类  (2015-12-23 13:27:30)

【C#、Asp.Net 工具类大全】Request请求工具类  (2015-12-23 13:15:56)

【C#、Asp.Net 工具类大全】弹出提示操作类  (2015-12-23 13:6:1)

【C#、Asp.Net 工具类大全】正则匹配工具类  (2015-7-26 9:36:56)

【C#、Asp.Net 工具类大全】Js常用操作类  (2015-7-15 14:23:33)

【C#、Asp.Net 工具类大全】Html常用帮助类  (2015-7-11 23:42:53)

【C#、Asp.Net 工具类大全】压缩文本、字节或者文件的压缩辅助类  (2015-7-11 23:23:49)

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。