Asp.Net平臺下的圖片在線裁剪功能的實現代碼(源碼打包)

2024-07-10 13:24:39

字體：大中小

來源：轉載

供稿：網友

1.前臺展現實現

網上找到這個jquery.Jcrop,稍看了下,發現它提供的效果完全能滿足項目需求.

官方網址:,感興趣的朋友可去看看.

頁面先引用相關樣式和腳本:

復制代碼代碼如下:

頁面body部分代碼:

復制代碼代碼如下:

<asp:Label Text="原始圖片" runat="server"></asp:Label><br />
<asp:Image runat="server" />
<br />
<asp:Label runat="server" Text="最終顯示效果"></asp:Label>
<div>
<asp:Image 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);
};

另一部分前臺代碼:

復制代碼代碼如下:

后臺代碼的實現:
首先引用相關命名空間

復制代碼代碼如下:

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

保存按鈕的方法,從頁面取到相關參數,然后調用裁剪方法.

復制代碼代碼如下:

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

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

復制代碼代碼如下:

//通過連接創建Image對象
System.Drawing.Image oldimage = System.Drawing.Image.FromFile(input_ImgUrl);
oldimage.Save(Server.MapPath("temp.jpg"));//把原圖Copy一份出來,然后在temp.jpg上進行裁剪,最后把裁剪后的圖片覆蓋原圖 oldimage.Dispose();//一定要釋放臨時圖片,要不之后的在此圖上的操作會報錯,原因沖突 Bitmap bm = new Bitmap(Server.MapPath("temp.jpg"));
//處理JPG質量的函數
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;
}