`
minh456
  • 浏览: 63662 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ASP.NET Ajax实现图片剪裁

 
阅读更多

实现这个功能主要用到了JQuery和基于JQuery的图片处理插件JCrop。

JQuery可以下载下来,或者在代码中这样引用<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>。
JCrop需要下载,其中还包括相应的一些例子可以作为参考。

这个例子有三部分功能,一、图片上传,二、现实用户上传上来的图片,三、图片剪裁。
主要的流程是:用户上传图片,显示图片,在用户点击剪裁按钮之后,用ajax的方式显示剪裁之后的图片。
上传图片就用的ASP.NET自带的文件上传控件,整个文件上传功能放在一个用户空间里面。
每次用户上传了图片以后,文件存放的位置持久化在一个xml文件中。
在用JCrop实现剪裁功能的时候,需要在页面中添加一些隐藏域来
存储图片剪裁中用到的坐标和宽高等数据。剪裁则用JQuery的Ajax功能实现。






1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Pages_Default" %>
2
3 <%@ Register Src="../Controls/ImageUpload.ascx" TagName="ImageUpload" TagPrefix="uc1" %>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7     <title></title>
8
9     <script src="../Scripts/jquery.min.js" type="text/javascript"></script>
10
11     <script src="../Scripts/jquery.Jcrop.js" type="text/javascript"></script>
12
13     <link href="../Style/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
14     <link href="../Style/demos.css" rel="stylesheet" type="text/css" />
15
16     <script type="text/javascript" language="Javascript">
17
18         // Remember to invoke within jQuery(window).load()
19         // If you don't, Jcrop may not initialize properly
20         jQuery(document).ready(function() {
21
22             jQuery('#cropbox').Jcrop({
23                 //onChange: showCoords,
24                 onSelect: showCoords
25             });
26
27         });
28
29         function onCropClick() {
30
31             //alert("{ pPartStartPointX: '" + $('#x').val() + "', pPartStartPointY: '" + $('#y').val() + "', pPartWidth: '" + $('#w').val() + "', pPartHeight: '" + $('#h').val() + "'}");
32             $.ajax({
33                 type: "POST",
34                 contentType: "application/json; charset=utf-8",
35                 data: "{ pPartStartPointX: '" + $('#x').val() + "', pPartStartPointY: '" + $('#y').val() + "', pPartWidth: '" + $('#w').val() + "', pPartHeight: '" + $('#h').val() + "'}",
36                 url: "Default.aspx/CroppedImage",
37                 dataType: "json",
38                 success: function(data) {
39                     //alert(data.d);
40                     //$("#CustomerDetails").html(data);
41                     $('#disp').html("<img src='" + data.d + "' alt='' />");
42                 }
43             });
44         }
45
46         // Our simple event handler, called from onChange and onSelect
47         // event handlers, as per the Jcrop invocation above
48         function showCoords(c) {
49             jQuery('#x').val(c.x);
50             jQuery('#y').val(c.y);
51             //jQuery('#x2').val(c.x2);
52             //jQuery('#y2').val(c.y2);
53             jQuery('#w').val(c.w);
54             jQuery('#h').val(c.h);
55         };
56
57     </script>
58
59 </head>
60 <body>
61     <form id="form1" runat="server">
62     <div>
63         <!-- This is the image we're attaching Jcrop to -->
64         <img runat="server" id="cropbox" />
65         <input type="button" id="btnCrop" value=" Crop Image " onclick="onCropClick();" />
66         <div id="disp">
67         </div>
68         <label>
69             <%--X1--%>
70             <input type="hidden" size="4" id="x" name="x" /></label>
71         <label>
72             <%--Y1--%>
73             <input type="hidden" size="4" id="y" name="y" /></label>
74         <label>
75             <%--X2--%>
76             <input type="hidden" size="4" id="x2" name="x2" /></label>
77         <label>
78             <%--Y2--%>
79             <input type="hidden" size="4" id="y2" name="y2" /></label>
80         <label>
81             <%--W--%>
82             <input type="hidden" size="4" id="w" name="w" /></label>
83         <label>
84             <%--H--%>
85             <input type="hidden" size="4" id="h" name="h" /></label>
86         <uc1:ImageUpload ID="ImageUpload1" runat="server" />
87     </div>
88     </form>
89 </body>
90 </html>


注意在页面代码中添加需要的javascript和css样式表


1<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
2<script src="../Scripts/jquery.Jcrop.js" type="text/javascript"></script>
3<link href="../Style/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
4<link href="../Style/demos.css" rel="stylesheet" type="text/css" />


然后我们需要添加调用JCrop的代码来实现图片的剪裁






1    <script type="text/javascript" language="Javascript">
2
3        jQuery(document).ready(function() {
4
5            jQuery('#cropbox').Jcrop({
6                onSelect: showCoords
7            });
8        });
9
10        function onCropClick() {
11
12            $.ajax({
13                type: "POST",
14                contentType: "application/json; charset=utf-8",
15                data: "{ pPartStartPointX: '" + $('#x').val() + "', pPartStartPointY: '" + $('#y').val() + "', pPartWidth: '" + $('#w').val() + "', pPartHeight: '" + $('#h').val() + "'}",
16                url: "Default.aspx/CroppedImage",
17                dataType: "json",
18                success: function(data) {
19                    $('#disp').html("<img src='" + data.d + "' alt='' />");
20                }
21            });
22        }
23
24        function showCoords(c) {
25            jQuery('#x').val(c.x);
26            jQuery('#y').val(c.y);
27            jQuery('#w').val(c.w);
28            jQuery('#h').val(c.h);
29        };
30
31    </script>


这个代码都很简单。JCrop处理id为cropbox的img中的图片。在onSelect事件中添加函数showCoords来记录用户选中图片区域的数据。
并在剪裁按钮的点击事件中实现Ajax的功能,将后台处理好的图片显示在页面上。

所需的命名空间

1using System;
2using System.Web;
3using System.Web.Services;

为什么要用System.Web.Services这个命名空间呢,因为我们用JQuery调用后台代码时用的是后台的页面方法



1    [WebMethod]
2    public static string CroppedImage(int pPartStartPointX, int pPartStartPointY, int pPartWidth, int pPartHeight)
3    {
4        XmlHelper xmlHelper = new XmlHelper();
5        xmlHelper.XmlPath = HttpContext.Current.Server.MapPath("~/App_Data/ImagePaths.xml");
6        string originalPath = xmlHelper.GetImagepath();
7        string savePath = HttpContext.Current.Server.MapPath("~/Images/CropImg/");
8        string filename = ImageHelper.CropImage(originalPath, savePath, pPartWidth, pPartHeight, pPartStartPointX, pPartStartPointY);
9
10        string fullpath = "../Images/CropImg/" + filename;
11        return fullpath;
12    }


前面提到过用户控件,上传图片并记录图片的存放路径。存放图片路径主要通过类XmlHelper来实现。



<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageUpload.ascx.cs" Inherits="Controls_ImageUpload" %>
<%--<asp:PlaceHolder ID="imageContainer" runat="server"></asp:PlaceHolder>--%>
<table>
    <tr>
        <td>
            <asp:FileUpload ID="imgUpload" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnUpload" runat="server" Text=" Up Load "
                onclick="btnUpload_Click" />
        </td>
    </tr>
</table>


后台代码



1using System;
2using System.Web.UI.HtmlControls;
3
4public partial class Controls_ImageUpload : System.Web.UI.UserControl
5{
6    private readonly string IMG_PATH = "~/Images/Upload/";
7    private XmlHelper _xmlHelper = new XmlHelper();
8
9    /// <summary>
10    /// Name of a control to operate
11    /// </summary>
12    public string ControlName { get; set; }
13
14    protected void Page_Load(object sender, EventArgs e)
15    {
16        if (!IsPostBack)
17        {
18            SetPathInfo();
19        }
20    }
21
22    protected void btnUpload_Click(object sender, EventArgs e)
23    {
24        try
25        {
26            // Specify the path on the server to
27            // save the uploaded file to.
28            String savePath = Server.MapPath(IMG_PATH);
29
30            // Before attempting to perform operations
31            // on the file, verify that the FileUpload
32            // control contains a file.
33            if (imgUpload.HasFile)
34            {
35                // Get the name of the file to upload.
36                String fileName = imgUpload.FileName;
37
38                // Append the name of the file to upload to the path.
39                savePath += fileName;
40
41                // Call the SaveAs method to save the
42                // uploaded file to the specified path.
43                // This example does not perform all
44                // the necessary error checking.              
45                // If a file with the same name
46                // already exists in the specified path, 
47                // the uploaded file overwrites it.
48                imgUpload.SaveAs(savePath);
49
50                _xmlHelper.XmlPath = Server.MapPath("~/App_Data/ImagePaths.xml");
51                _xmlHelper.StoreImagePath(savePath);
52
53                SetPathInfo();
54            }
55        }
56        catch (Exception)
57        {
58            this.Page.ClientScript.RegisterStartupScript(this.GetType(), "", "alert('Image can not be uploaded, please check!'", true);
59        }
60    }
61
62
63    private void SetPathInfo()
64    {
65        string serverPath = "~/Images/Upload/";
66
67        XmlHelper xmlHelper = new XmlHelper();
68        xmlHelper.XmlPath = Server.MapPath("~/App_Data/ImagePaths.xml");
69        string imgPath = xmlHelper.GetImagepath();
70        string filename = GetFileName(imgPath);
71
72        serverPath += filename;
73
74        HtmlImage cropbox = (HtmlImage)Parent.FindControl("cropbox");
75        if (cropbox != null)
76            cropbox.Src = serverPath;
77        HtmlImage preview = (HtmlImage)Parent.FindControl("preview");
78        if (preview != null)
79            preview.Src = serverPath;
80
81        Context.Items["imgsrc"] = serverPath;
82    }
83
84    private string GetFileName(string fullname)
85    {
86        // Validation of string is not implemented temperarily
87        int index = fullname.LastIndexOf("\\");
88        string filename = fullname.Substring(index + 1);
89
90        return filename;
91    }
92}
93


XmlHelper类中用到的主要方法



1public void StoreImagePath(string img)
2    {
3        try
4        {
5            if (_xdoc == null)
6            {
7                _xdoc = XDocument.Load(XmlPath);
8            }
9
10            _xdoc.Root.Descendants().Remove();
11            _xdoc.Root.Add(new XElement("path", img));
12            _xdoc.Save(this.XmlPath);
13        }
14        catch
15        {
16            throw new Exception("Error occured in adding image path.");
17        }
18    }
19
20    public string GetImagepath()
21    {
22        string imagePath = string.Empty;
23
24        try
25        {
26            if (_xdoc == null)
27            {
28                _xdoc = XDocument.Load(XmlPath);
29            }
30
31            imagePath = _xdoc.Root.Descendants().First().Value.ToString();
32        }
33        catch
34        {
35            throw new Exception("Error occured in getting image path.");
36        }
37
38        return imagePath;
39    }


之后就是一个很重要的方法了。剪裁图片的方法,放在ImageHelper类中。



1public static string CropImage(string originamImgPath, string imgPath, int width, int height, int x, int y)
2    {
3        string filename = DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
4        byte[] CropImage = Crop(originamImgPath, width, height, x, y);
5        using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
6        {
7            ms.Write(CropImage, 0, CropImage.Length);
8            using (System.Drawing.Image CroppedImage = System.Drawing.Image.FromStream(ms, true))
9            {
10                string SaveTo = imgPath + filename;
11                CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
12            }
13        }
14
15        return filename;
16    }
17
18    private static byte[] Crop(string Img, int Width, int Height, int X, int Y)
19    {
20        try
21        {
22            using (Image OriginalImage = Image.FromFile(Img))
23            {
24                using (Bitmap bmp = new Bitmap(Width, Height, OriginalImage.PixelFormat))
25                {
26                    bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
27                    using (Graphics Graphic = Graphics.FromImage(bmp))
28                    {
29                        Graphic.SmoothingMode = SmoothingMode.AntiAlias;
30                        Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
31                        Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
32                        Graphic.DrawImage(OriginalImage, new Rectangle(0, 0, Width, Height), X, Y, Width, Height, GraphicsUnit.Pixel);
33                        MemoryStream ms = new MemoryStream();
34                        bmp.Save(ms, OriginalImage.RawFormat);
35                        return ms.GetBuffer();
36                    }
37                }
38            }
39        }
40        catch (Exception Ex)
41        {
42            throw (Ex);
43        }
44    }


看下效果,demo阶段先不做优化了。
开始


显示上传的图片


图片剪裁



分享到:
评论

相关推荐

    ASP.NET运用AJAX头像图片裁切

    用户头像裁切功能,用到了JQuery 1.2,源码包中含有两个版本,其中一个是通用版,另一个是专为VS2005开发的朋友准备的。...本程序裁切图片后可以保存,裁切过程中可以显示图片相关位置信息,总体来说很不错。

    ASP.Net+C#+AJax+图片剪载上传

    在实际应用中,开发者可能会使用ASP.NET的Web Forms或MVC框架来构建后端逻辑,利用AJAX异步提交剪裁参数和图片数据。C#代码会解析这些数据,对图片进行裁剪,并将处理后的图片保存在服务器上。前端部分,通常会使用...

    Telerik RadControls for ASP.NET AJAX 2013 NuGet 程序包

    【Telerik RadControls for ASP.NET AJAX 2013 NuGet 程序包】是.NET开发者们在构建Web应用程序时经常会用到的一款强大的UI组件库。Telerik是一家知名的软件开发公司,以其高质量的开发工具而闻名,尤其在UI控件方面...

    一个基于C#+ASP.NET实现的图片裁剪Image Cropping 处理控件代码

    5. **AJAX技术**:为了实现无刷新的用户体验,项目可能使用了ASP.NET的AJAX扩展,或者纯JavaScript的异步请求,将裁剪结果发送到服务器进行处理和保存。 6. **图像处理库**:在后端,可能使用了.NET框架中的System....

    jquery+Asp.net实现图片裁剪

    4. **处理裁剪**:在服务器端,ASP.NET接收裁剪参数(如裁剪框的左上角和右下角坐标)以及原始图片,然后使用.NET Framework的图像处理类库(如System.Drawing)裁剪图片。 5. **保存裁剪结果**:裁剪后的图片被...

    ASp.net JS图片剪裁

    ASP.NET JS图片剪裁是一种常见的前端图像处理技术,它结合了服务器端的ASP.NET和客户端的JavaScript技术,允许用户在网页上预览并裁剪图片。这种技术在上传头像、产品图片编辑或任何需要用户自定义图片尺寸的应用...

    asp.net 实现图片批量上传

    本教程将详细讲解如何实现ASP.NET中的图片批量上传,包括动态添加FileUpload控件以及上传过程中的关键步骤。 首先,我们需要在ASP.NET页面上创建一个FileUpload控件,用于用户选择要上传的文件。通常,我们可以使用...

    javascript asp.net 图片剪切上传 图片裁剪 上传保存

    在图片上传过程中,ASP.NET接收JavaScript发送的裁剪后图片数据,通常通过Ajax异步请求完成,这样可以在不刷新页面的情况下完成上传。服务器端可以使用ASP.NET的HTTP模块或控制器来接收和处理这些请求。收到图片数据...

    asp.net图片裁剪

    在ASP.NET中实现图片裁剪,通常涉及以下几个关键知识点: 1. **图像处理库**:ASP.NET内置了一些基本的图像处理功能,但为了实现复杂的裁剪操作,我们通常会引入第三方库,如ImageMagick、FreeImage或System....

    Asp.Net剪切图片

    在Asp.Net中实现图片剪切是一项常见的需求,特别是在网页应用中处理用户上传的图片时。本项目利用了jQuery库中的Jcrop插件,它是一个强大的JavaScript图片裁剪工具,可以很好地兼容各种主流浏览器,包括IE、Firefox...

    ASP.Net C# AJax 图片剪载上传

    本话题主要关注如何在ASP.NET C#环境中利用AJAX技术实现图片的上传和剪裁。尽管描述中提到资料可能较老,但基本原理和技术栈仍然是现代Web开发的基础,值得我们深入探讨。 首先,ASP.NET是微软推出的一种Web应用...

    ASP.NET JQuery ImgAreaSelect 实现上传图片在线剪裁

    在本示例中,我们将探讨如何结合JQuery ImgAreaSelect插件,实现在ASP.NET环境中上传图片并进行在线剪裁的功能。 JQuery ImgAreaSelect是一个jQuery插件,它提供了在网页上选择图像区域的能力。这个功能对于用户...

    [开发工具] Telerik RadControls for ASP.NET AJAX 2012.2 607 零售版

    【开发工具】Telerik RadControls for ASP.NET AJAX 2012.2 607 零售版是一款强大的Web开发组件库,专为ASP.NET AJAX平台设计。这款工具集提供了一系列高度优化且功能丰富的控件,帮助开发者构建交互性强、性能卓越...

    asp.net 切图 图库 图片展示

    用户可以选择并裁剪图片,然后通过Ajax发送裁剪后的数据到服务器,服务器再利用C#的ImageMagick或System.Drawing等库将裁剪信息应用到原始图片上,生成新的缩略图。 图片展示部分,我们可以参考163图库的设计,实现...

    asp.net结合jquery裁剪图片

    在ASP.NET web应用开发中,有时我们需要实现用户可以自定义裁剪图片的功能,这在上传头像、产品图片等场景非常常见。本教程将详细讲解如何结合ASP.NET和jQuery实现图片裁剪功能。 首先,ASP.NET是微软推出的一种...

    Asp.Net MVC + Cropper图片裁剪

    Cropper是一款强大的JavaScript库,它提供了方便的图片裁剪功能,能与jQuery完美结合,使得在Asp.Net MVC项目中实现图片裁剪变得简单易行。下面将详细介绍如何在Asp.Net MVC中使用Cropper实现图片裁剪功能。 首先,...

    在线裁剪图片(JS+ASP.NET)

    总的来说,结合JavaScript和ASP.NET实现在线裁剪图片是一个综合性的任务,涉及前端交互设计、图像处理、服务器端编程等多个方面。通过深入理解这两个技术,开发者可以构建出高效、用户友好的图片裁剪功能,满足各种...

    Telerik RadControls for ASP.NET AJAX Q1 2009 SP2 Source (2009年5月27日的版本)

    【Telerik RadControls for ASP.NET AJAX Q1 2009 SP2】是Telerik公司发布的一款用于ASP.NET AJAX开发的组件集,该版本发布于2009年5月27日,提供了Service Pack 2(SP2)的更新。Telerik是一家知名的软件开发工具...

    基于asp.net和jquery技术实现无刷新上传头像和图片剪裁

    在服务器端,ASP.NET可以接收这些参数,并使用图像处理库(如ImageMagick或System.Drawing)根据接收到的坐标裁剪图片。裁剪后的图片可以保存在服务器的指定位置,并返回裁剪成功的消息给客户端。 总的来说,结合...

    ajax+js+asp+aspjpeg 实现剪切图片、拖拽图片、缩放图片、裁切图片

    ajax+js+asp+aspjpeg实现剪切图片、拖拽图片、缩放图片、裁切图片 主要功能: 加载服务器上的图片,用户可以自定义图片的大小,拖拽,缩放,裁切,预览等效果! 可以作为自定义头像功能使用! 备注:在这里我要向...

Global site tag (gtag.js) - Google Analytics