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

這個效果是模擬的，如何上傳圖片等這些小問題就不說了。那個大圖片是已經上傳到服務器了。然后有個黑色邊框的框長和寬都是100px。我們就是要截取這個大小的圖片來作為我們的頭像。你可以拖動這個黑框到合適的位置來截取我們想要的圖片。在ie7的效果中必須點中邊框才能拖到，在火狐中可以點住黑框的任何地方。而且這個黑框我沒有做邊界限制，就是說他不應該拖出這個大圖片的范圍。如果拖出了就是報錯。
我們需要建立這個兩個頁面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>
<img src="pic/aa.gif" id="im" />
<div id="divCut"></div>

</div>
<hr />
<input type=button onclick="cut()" value="確定裁剪" />
<hr />
裁剪過的結果：
<img id="imgresult" />
<hr />
<div 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等于空字符表示成功了，然后顯示裁剪過的圖片，我們裁剪過后的圖片的地址和名字是固定。
{
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...哈哈

總結

以上是生活随笔為你收集整理的Asp.net实现在线截图（大图截取为小图）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。