快捷導(dǎo)航

Asp.Net平臺(tái)下的圖片在線裁剪功能的實(shí)現(xiàn)代碼(源碼打包)

更新時(shí)間：2011年10月19日 22:56:36 作者：

最近項(xiàng)目中有個(gè)圖片在線裁剪功能,本人查找資料,方法如下:前臺(tái)展現(xiàn)用jquery.Jcrop實(shí)現(xiàn),后臺(tái)使用 System.Drawing.Image類來(lái)進(jìn)行裁剪

1.前臺(tái)展現(xiàn)實(shí)現(xiàn)

網(wǎng)上找到這個(gè)jquery.Jcrop,稍看了下,發(fā)現(xiàn)它提供的效果完全能滿足項(xiàng)目需求.

官方網(wǎng)址:http://deepliquid.com/content/Jcrop.html,感興趣的朋友可去看看.

頁(yè)面先引用相關(guān)樣式和腳本:

復(fù)制代碼代碼如下:

 
<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> 

頁(yè)面body部分代碼:

復(fù)制代碼代碼如下:

 
<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的值是裁剪圖片的尺寸,而且要定義這個(gè)DIV的overflow:hidden.能夠及時(shí)看到圖片的裁剪效果的關(guān)鍵CSS屬性就是它了.

接下來(lái)講講jquery.Jcrop.js的基本用法,及相關(guān)javascript的實(shí)現(xiàn).

首先定義一些臨時(shí)變量,來(lái)保存相關(guān)參數(shù)

var jcrop_api, boundx, boundy;

然后給圖片的DOM元素綁定Jcrop功能,相關(guān)的方法屬性看英文就能明白其中的意思.

復(fù)制代碼代碼如下:

 
$('#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; 
}); 
//此方法是用來(lái)及時(shí)展現(xiàn)圖片裁剪效果 
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); 
}; 

另一部分前臺(tái)代碼:

復(fù)制代碼代碼如下:

 
<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()" /> 
</form> 

后臺(tái)代碼的實(shí)現(xiàn):
首先引用相關(guān)命名空間

復(fù)制代碼代碼如下:

 
using System.Drawing; 
using System.Drawing.Imaging; 
using System.Drawing.Design; 

保存按鈕的方法,從頁(yè)面取到相關(guān)參數(shù),然后調(diào)用裁剪方法.

復(fù)制代碼代碼如下:

 
protected void saveImg(object sender, EventArgs e) 
{ 
if (IsPostBack) 
{ 
string tempurl = Path.Combine(ConfigAccess.UploadImagePath, _url); 
int startX = int.Parse(x1.Value); 
int startY = int.Parse(y1.Value); 
int width = int.Parse(Iwidth.Value); 
int height = int.Parse(Iheight.Value); 
ImgReduceCutOut(startX, startY, width, height, tempurl, tempurl); 
this.target.Visible = false; 
this.Label1.Visible = false; 
this.SaveImg.Enabled = false; 
} 
} 

接下是最重要的裁剪方法:

復(fù)制代碼代碼如下:

 
//通過(guò)連接創(chuàng)建Image對(duì)象 
System.Drawing.Image oldimage = System.Drawing.Image.FromFile(input_ImgUrl); 
oldimage.Save(Server.MapPath("temp.jpg"));//把原圖Copy一份出來(lái),然后在temp.jpg上進(jìn)行裁剪,最后把裁剪后的圖片覆蓋原圖 oldimage.Dispose();//一定要釋放臨時(shí)圖片,要不之后的在此圖上的操作會(huì)報(bào)錯(cuò),原因沖突 Bitmap bm = new Bitmap(Server.MapPath("temp.jpg")); 
//處理JPG質(zhì)量的函數(shù) 
ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders(); 
ImageCodecInfo ici = null; 
foreach (ImageCodecInfo codec in codecs) 
{ 
if (codec.MimeType == "image/jpeg") 
{ 
ici = codec; 
break; 
} 
} 
EncoderParameters ep = new EncoderParameters(); 
ep.Param[0] = new EncoderParameter(Encoder.Quality, (long)level); 
// 裁剪圖片 
Rectangle cloneRect = new Rectangle(startX, startY, int_Width, int_Height); 
PixelFormat format = bm.PixelFormat; 
Bitmap cloneBitmap = bm.Clone(cloneRect, format); 
if (int_Width > int_Standard_Width) 
{ 
//縮小圖片 
System.Drawing.Image cutImg = cloneBitmap.GetThumbnailImage(int_Standard_Width, int_Standard_Height, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero); 
cutImg.Save(out_ImgUrl, ici, ep); 
cutImg.Dispose(); 
} 
else 
{ 
//保存圖片 
cloneBitmap.Save(out_ImgUrl, ici, ep); 
} 
cloneBitmap.Dispose(); 
bm.Dispose(); 
} 
public bool ThumbnailCallback() 
{ 
return false; 
} 