親們，真的不願意相信你們是被標題吸引進來的，但事實讓我不得不承認男人的本性。但是，請放心，我絕非標題黨（我最痛恨那些浪費大家時間的標題黨了），既然你有幸進來了，那我得想辦法讓你帶著收穫離開。輕輕地我走了，正如我輕輕地來，我要帶走樓主留給我的一片雲彩……

好吧，收起我的放蕩不羈，讓我們立馬切入正題，正如標題上說的，今天我們要在ASP.NET中用jQuery.Jcrop外掛實現圖片的選取功能，你想選取美女的哪個部位你說了算，我就管不著了。

總的來說，原理很簡單，大致流程是：在瀏覽器上載入原圖 --> 用矩形框在原圖上選取區域並將選取的頂點座標和矩形尺寸傳送至伺服器 --> 伺服器端用圖片切割演算法切割原圖並輸出切割後的圖片

1、在頁面上載入原圖

這個就不用多說了，就是在頁面上顯示一張圖片，一個img標籤搞定，不過為了下一步演示，還是貼一下程式碼

<img src="girl.jpg" kesrc="girl.jpg" alt="" id="TestImage" style="float: left;">

2、用矩形框在原圖上選取區域

這個我們要用到一個jQuery外掛Jcrop，感謝Jcrop，其專案頁面地址：http://deepliquid.com/content/Jcrop.html，再次感謝。接下來就是運用這個外掛來讓我們能在原圖上隨意地切圖。先在頁面上放幾個隱藏域，用來存放當前選取的頂點座標及選取矩形的尺寸，再放一個儲存按鈕，點選儲存按鈕後將在伺服器上儲存切割後的圖片。程式碼如下：

<form id="AvatarForm" action="">
<input id="x" name="x" type="hidden">
<input id="y" name="y" type="hidden">
<input id="w" name="w" type="hidden">
<input id="h" name="h" type="hidden">
<input class="input_btn" id="BtnSaveAvatar" value="確定儲存" type="submit">
</form>
 

四個隱藏域分別表示x：左上頂點x座標；y：左上頂點y座標；w：選取矩形寬度；h：選取矩形長度。
然後我們呼叫外掛，做好初始化工作，引入js和css檔案：

<script type="text/javascript" src="js/jquery.js" kesrc="js/jquery.js"></script>
<script type="text/javascript" src="js/Jcrop/js/jquery.Jcrop.js" kesrc="js/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="js/Jcrop/css/jquery.Jcrop.css" kesrc="js/Jcrop/css/jquery.Jcrop.css" type="text/css">

初始化原圖的js程式碼：

$(document).ready(function(){
    $('#TestImage').Jcrop({
        onChange: updateCoords,
        onSelect: updateCoords
    });
    $("#BtnSaveAvatar").click(function(){
        $.ajax({
            url:'Handler.ashx',
            data:{'x':$("#x").val(),'y':$("#y").val(),'w':$("#w").val(),'h':$("#h").val()},
            datatype : "text/json",
            type:'post',
            success: function(o){ window.location.href="result.aspx?url="+o;}    //成功後跳轉到result頁面檢視切割後圖片，把url        });
return false; 
    });
});
function updateCoords(c){
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

經過上述步驟，我們很高興的看到一位美女出現在我們眼前，並任由我們選取任何部位，很刺激吧，由於demo在最後，先在這截一張效果圖吧

3、伺服器端切割圖片並輸出切割後的圖片：

切割圖片的主要類程式碼如下：

public class ImageCut
{
///<summary>/// 剪裁 -- 用GDI+
///</summary>///<param name="b">原始Bitmap</param>///<param name="StartX">開始座標X</param>///<param name="StartY">開始座標Y</param>///<param name="iWidth">寬度</param>///<param name="iHeight">高度</param>///<returns>剪裁後的Bitmap</returns>    public Bitmap KiCut(Bitmap b)
    {
if (b == null)
        {
return null;
        }

int w = b.Width;
int h = b.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);

            Graphics g = Graphics.FromImage(bmpOut);
            g.DrawImage(b, new Rectangle(0, 0, Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel);
            g.Dispose();

return bmpOut;
        }
catch
        {
return null;
        }
    }

public int X = 0;
public int Y = 0;
public int Width = 120;
public int Height = 120;
public ImageCut(int x, int y, int width, int heigth)
    {
        X = x;
        Y = y;
        Width = width;
        Height = heigth;
    }
}

在Handler.ashx中，接收頁面傳遞過來的切割圖片的頂點座標以及長寬尺寸，並呼叫C#影象切割類實現圖片切割：

public void ProcessRequest (HttpContext context) {
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("girl.jpg");
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);
        System.Drawing.Bitmap cuted = ic.KiCut(new System.Drawing.Bitmap(sourceFile));
string cutPath = context.Server.MapPath(savePath);
        cuted.Save(cutPath, System.Drawing.Imaging.ImageFormat.Jpeg);
        context.Response.Write(savePath);    //輸出儲存的路徑，以便頁面端接收路徑顯示切割後的圖片}

最後我們在Result.aspx頁面上接收切割後的圖片路徑並顯示切割後的圖片：

<img src="<%=Request["url"] %>" alt="" />