图片裁剪

首先，要下载Jcrop组件，这里是下载地址：http://deepliquid.com/content/Jcrop.htm

先看一下我们想要效果，还是不错的：

应该是这个效果吧!下面看一下js代码，最让人头疼的应该就是这些代码，简直白天不懂夜的黑啊：

 1 <head runat="server">
 2     <title></title>
 3     <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
 4     <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
 5     <link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
 6     <script type="text/javascript" language="javascript">
 7         $(function () {
 8             $("#TestImage").Jcrop({
 9                 onChange: updateCoords,
10                 onSelect: updateCoords
11             });
12 
13             $("#BtnSaveAvatar").click(function () {
14                 var Imgname = document.getElementById("TestImage").alt;
15                 $.ajax({
16                     url: 'Handler3.ashx',
17                     data: { 'name': Imgname, 'x': $("#x").val(), 'y': $("#y").val(), 'w': $("#w").val(), 'h': $("#h").val() },
18                     datatype: "text/json",
19                     type: 'post',
20                     success: function (o) { window.location.href = "Login.aspx?url=" + o; }
21                 });
22                 return false;
23             });
24         });
25         function updateCoords(c) {
26             $("#x").val(c.x);
27             $("#y").val(c.y);
28             $("#w").val(c.w);
29             $("#h").val(c.h); 
30             };
31     </script>
32 </head>
33 <body>
34     <div>
35     <input id="x" name="x" type="hidden"/>       
36      <input id="y" name="y" type="hidden"/>        
37      <input id="w" name="w" type="hidden"/>        
38      <input id="h" name="h" type="hidden"/>        
39      <img src="IMG/1.jpg"  alt="IMG/1.jpg" id="TestImage" style="float: left;"/>
40      <input class="input_btn" id="BtnSaveAvatar" value="确定保存" type="submit"/>
41     </div>
42 </body>
43 </html>

这里Login.aspx页面是用来显示我们裁剪的那部分图像，裁剪成功后跳转到这个页面：

  <img src="<%=Request["url"] %>" alt="" />
然后再看一下的我们的C#代码，拨开黑夜!

public class ImageCut
{
    public int X;
    public int Y;
    public int Width;
    public int Height;
    public ImageCut(int x, int y, int width, int height)
    {
        this.X = x;
        this.Y = y;
        this.Width = width;
        this.Height = height;
    }

    public Bitmap KiCut(Bitmap bmp)
    {
        if (bmp == null) { return null; }
        int w = bmp.Width;
        int h = bmp.Height; 
        if (X >= w || Y >= h) { return null; } 
        if (X + Width > w) { Width = w - X; } 
        if (Y + Height > h) { Height = h - Y; }
        
        try
        {
            Bitmap bmpOut = new Bitmap(Width, Height, PixelFormat.Format24bppRgb);//创建指定大小的Bitmap
            Graphics g = Graphics.FromImage(bmpOut);//从指定的图像创建画图实例
            g.DrawImage(bmp, new Rectangle(0, 0, Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel);//开始画图
            g.Dispose();
            return bmpOut;
        }
        catch
        {
            return null;
        }
    }
}

public class Handler3 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string name=context.Request["name"];
        string xstr = context.Request["x"];
        string ystr = context.Request["y"];
        string wstr = context.Request["w"];
        string hstr = context.Request["h"];
        string sourceFile = context.Server.MapPath(name);
        string savePath = "CutImage/" + Guid.NewGuid() + ".jpg";
        int x = 0; int y = 0; int w = 1; int h = 1;
        try
        {
            x = int.Parse(xstr);
            y = int.Parse(ystr);
            w = int.Parse(wstr);
            h = int.Parse(hstr);
        }
        catch { }
        ImageCut ic = new ImageCut(x, y, w, h);
        Bitmap cuted = ic.KiCut(new System.Drawing.Bitmap(sourceFile));
        string cutPath = context.Server.MapPath(savePath);
        cuted.Save(cutPath,ImageFormat.Jpeg);
        context.Response.Write(savePath);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

　　当我们

posted @ 2013-09-23 20:43  YoMe  阅读(392)  评论(0)    收藏  举报