為了使用戶能自定義個人頭像，需要提供一個對上傳圖片的截圖功能，當前很多網站特別是SNS類網站都提供這樣的功能，非常實用。主要實現的形式有兩種，一種是flash截圖，另一種就是javascript截圖，兩種方法各有秋千，關於Flash截圖可以參考一下UcHome程序中頭像上傳功能，但這不是我要討論的話題，我這裡主要是如何實現javascript截圖，利用jQuery的imgAreaSelect插件，輕松實現自定義頭像[avatar]javascript截圖功能
首先，利用的是jquery上傳剪切插件imgAreaSelect
官方下載地址：http://odyniec.net/projects/imgareaselect/
加壓後裡面有兩個js文件
一個是jquery.min.js 另一個是 jquery.imgareaselect.js
將這兩個js文件引入到項目中去
其次，在文件中要加入javascript代碼
//預覽顯示
function preview(img, selection){
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
//動態小頭像 獲取當前選中框的寬度，高度，左邊框，右邊框
$('#view').css({ //view是預覽圖像的id
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 220) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//加載小頭像
$(document).ready(function () {
$('<div><img id="view" src="bee.jpg" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter('#biuuu'); //把新建元素放到 #biuuu 之後
//.insertAfter($('#biuuu')); //把新建元素放到 #biuuu 之後
});
//初始化加載
$(window).load(function () {
$('#biuuu').imgAreaSelect({
aspectRatio: '1:1', //截取比例
//show:true,
//resizable:false, //是否可調整大小
autoHide: false,//選擇框選擇完畢是否自己取消
key:true, //是否啟用鍵盤，默認為false
//x1: 75, y1: 30, x2: 225, y2: 180, //需要處理的區域，原始的
//x1:左上角x軸坐標 y1:左上角y軸坐標 x2:右下角x軸坐標 y2:右下角y軸坐標
keys: { arrows: 1, ctrl: 5, shift: 'resize' }, //調整像素大小
//onInit: function(img, selection) { ias.setSelection(100, 50, 250, 150, true); ias.update(); }, //設置初始函數 畫出選擇框
onSelectChange: preview , //選框移動時觸發的事件
onSelectEnd: getLocation //選框結束時觸發的事件
});
});
上述的詳細參數配置在官網上也有，自己去查閱
最後，在文件中使用
<div>
<img id="biuuu" src="bee.jpg" title="biuuu" width="320px" height="220px" style="float: left; margin-right: 10px;"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
說明：1.利用插件很容易做出來剪切預覽效果，可是讓我糾結了半天是：生成的預覽圖如何上傳呀，在網上找了一段代碼，發現只要是上傳圖片的大小不同，那麼生成的圖也不同，後來想想是縮放比例的問題。也就是說要實際圖像的大小和在頁面顯示的大小是不一樣的，被縮放了，那麼在後台上傳剪切圖像的時候，我們必須要還原原來圖像的大小，並把要剪切的部分也相應的要放大或縮小
代碼：
System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(Server.MapPath("bee.jpg"));
int height = Convert.ToInt32(sourceImage.Height);//獲取原始圖像的高
int width = Convert.ToInt32(sourceImage.Width);//獲取原始圖像的寬度
x1 = x1*(width/320);//根據實際尺寸縮放
x2 = x2*(width/320);
y1 = y1*(height/240);
y2 = y2*(height/240);