Asp.Net平臺下的圖片在線裁剪功能的實現代碼(源碼打包)
2024-07-10 12:41:46
供稿：網友
1.前臺展現實現
網上找到這個jquery.Jcrop,稍看了下,發現它提供的效果完全能滿足項目需求.
官方網址:http://deepliquid.com/content/Jcrop.html,感興趣的朋友可去看看.
頁面先引用相關樣式和腳本:
代碼如下:
<link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>
頁面body部分代碼:
代碼如下:
<asp:Label ID="Label1" Text="原始圖片" runat="server"></asp:Label><br />
<asp:Image ID="target" runat="server" />
<br />
<asp:Label ID="Label2" runat="server" Text="最終顯示效果"></asp:Label>
<div id="preImg" style="width: 150px; height: 80px; overflow: hidden;">
<asp:Image ID="preview" alt="Preview" runat="server" />
</div>
其中ID為preImg的Style的width和height的值是裁剪圖片的尺寸,而且要定義這個DIV的overflow:hidden.能夠及時看到圖片的裁剪效果的關鍵CSS屬性就是它了.
接下來講講jquery.Jcrop.js的基本用法,及相關javascript的實現.
首先定義一些臨時變量,來保存相關參數
var jcrop_api, boundx, boundy;
然后給圖片的DOM元素綁定Jcrop功能,相關的方法屬性看英文就能明白其中的意思.
代碼如下:
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
onRelease: clearCoords,
aspectRatio: 150 / 80,
minSize: _minarray,
setSelect: _array
}, function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
//此方法是用來及時展現圖片裁剪效果
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 150 / c.w;
var ry = 80 / c.h;
var _width;
var _height;
if (Math.round(rx * boundx) > $targetImg.width()) {
_width = $targetImg.width();
}
else {
_width = Math.round(rx * boundx);
}
if (Math.round(ry * boundy) > $targetImg.height()) {
_height = $targetImg.height();
}
else {
_height = Math.round(ry * boundy);
}
$('#preview').css({
width: _width + 'px',
height: _height + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#Iwidth').val(c.w);
$('#Iheight').val(c.h);
};
另一部分前臺代碼:
代碼如下:
<form id="Form1" runat="server">
<asp:HiddenField ID="HdnNewImgPath" runat="server" />
<asp:HiddenField ID="x1" runat="server" />
<asp:HiddenField ID="y1" runat="server" />
<asp:HiddenField ID="Iwidth" runat="server" />
<asp:HiddenField ID="Iheight" runat="server" />
<br />
<asp:Button ID="SaveImg" runat="server" Text="裁剪并保存圖片" OnClick="saveImg" OnClientClick="return CheckIMG()" />
