Asp.net實現線上截圖（大圖截取為小圖）

最近看了有些網站實現的線上功能比較不錯。就是上傳一個圖片以後，把裁剪成固定大小的圖片一般用來做自己的照片。
   我這文章就是實現這功能，開發工具是vs2005和兩個js類庫，dom-drag.js和jquery，使用比較簡單，這個兩個js類庫是恨優秀的，建議大家再看看。
 先發一個片看看
   

    這個效果是類比的，如何上傳圖片等這些小問題就不說了。那個大圖片是已經上傳到伺服器了。然後有個黑色邊框的框長和寬都是100px。我們就是要截取這個大小的圖片來作為我們的頭像。你可以拖動這個黑框到合適的位置來截取我們想要的圖片。在ie7的效果中必須點中邊框才能拖到，在Firefox中可以點住黑框的任何地方。而且這個黑框我沒有做邊界限制，就是說他不應該拖出這個大圖片的範圍。如果拖出了就是報錯。
    我們需要建立這個兩個頁面cutImage.aspx和cutImageAjax.aspx
    cutImage.aspx就是我們看到的了。
    <script language=javascript  src=drag.js></script>
    <script language=javascript src=jquery-1.2.3.pack.js></script>
添加兩個js類庫
    然後是body中的html標籤。這裡面的html樣式是需要下一番功夫才出來的（aa.gif就是我們測試用的大圖）
     <div style="position:relative;">
        <img src="pic/aa.gif" id="im" />
                <div   style=" border:solid 2px black ;width:100px; height:100px; cursor:hand; position:absolute; left:0px; z-index:10; top:0px; background-color:Black  filter:alpha(opacity=20);" id="divCut"></div>

        </div>
        <hr />
        <input type=button onclick="cut()"  value="確定裁剪" />
        <hr />
         裁剪過的結果：
        <img id="imgresult" />
        <hr />
        <div style="border:solid 1px black;" id="divRecord"></div>

    然後就是js代碼了
    <script language=javascript>
        function init()//初始化執行
        {
            var cutDiv = document.getElementById('divCut');
            Drag.init(cutDiv);//這個就是拖到黑框的關鍵
            cutDiv.onDrag = function(x,y)//這個是拖動黑框時候引發的事件，x，y就是座標
            {
                document.getElementById("divRecord").innerHTML ="cutDiv 的座標" + x + '--' + y + "<br>圖片座標"+ document.getElementById("im").offsetLeft + "-"+document.getElementById("im").offsetTop;
            }
        }
        function cut()//裁剪按鈕的事件
        {
            var x = document.getElementById("divCut").offsetLeft - 10;//減10是因為大圖的起始x是10.
            var y = document.getElementById("divCut").offsetTop;
           
            $.get("cutImageAjax.aspx?t=" +((new Date()).valueOf()) , { offx:x ,offy:y },  callback);//jquery中ajax方法，比較簡單了。就是要吧x，和y的座標傳過去。
        }
        function callback(res)//這個是回呼函數。如果res等於Null 字元表示成功了，然後顯示裁剪過的圖片，我們裁剪過後的圖片的地址和名字是固定。
        {
            if(res=='')
            {
                document.getElementById('imgresult').src= 'pic/aa1.gif';
            }
        }
    </script>

    然後就是該看cutImageAjax.aspx頁面的幕後處理了。其實後台裁剪圖片是比較簡單的。
     protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string x = Page.Request.QueryString["offx"].ToString();
            string y = Page.Request.QueryString["offy"].ToString();

            Bitmap bm = new Bitmap(Server.MapPath("pic/aa.gif"));
            Rectangle cloneRect = new Rectangle(int.Parse(x),int.Parse(y) , 100,100);
            PixelFormat format = bm.PixelFormat;
            Bitmap cloneBitmap = bm.Clone(cloneRect, format);

            // ＝＝＝儲存圖片＝＝＝
            cloneBitmap.Save(Server.MapPath("pic/aa1.gif"),ImageFormat.Gif);
        }
    }
    看看吧。關鍵的裁剪代碼就是這樣的。但是我這裡沒有做其他的判斷，比片的格式等，如果上傳其他不同格式圖片可能還要做其他處理，這裡我就沒有說明了，不過道理差不多了。
   
    這就over了。o(∩_∩)o...哈哈