C# 搭配jQuery Jcrop plugin 製作圖片縮圖
最近在設計一個結合圖片上傳、縮圖、裁圖的整合Template
目前上傳跟裁圖差不多都用完了,今天就來寫縮圖的Code吧。
縮圖 Server 端的code其實很簡單,google就有一堆範例可以用,
但為了有個比較好的使用者介面,我還是希望能夠以圖像化的設計讓使用者
使用縮圖的功能,無奈jQuery的技術還不夠,自己寫不出一個好的plugin,
因此只好先借用Jcrop的部分功能,修改一下,來實作我的縮圖功能。
等我把Jcrop整個plugin都看懂(滿難的…),再把自己的plugin寫出來吧!
在頁面上就先套用稍微修改過的Jcrop,以及一些簡單的用法。
<script type="text/javascript">
$(function () {
$("#cropbox").Jcrop({
setSelect: [0, 0, 100000, 100000],
onChange: showCoords,
onSelect: showCoords
});
//另一種寫法
// var api = $.Jcrop($("#cropbox"), {
// setSelect: [0, 0, 100000, 100000],
// onChange: showCoords,
// onSelect: showCoords
// });
});
function showCoords(c) {
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
</script>
<%using (Html.BeginForm())
{ %>
<label>W <input type="text" size="4" id="w" name="width" /></label>
<br/>
<label>H <input type="text" size="4" id="h" name="height" /></label>
<input type="submit" value="確定" />
<br />
<br />
<%} %>
<img src="/images/2.jpg" id="cropbox" width="270" height="360" />
先來看看套用之後的樣子
基本上就是改一些Jcrop的function,將一些事件以及元素移除
接下來就簡單啦,把長寬跟圖片路徑傳到Server端,剩下縮圖的code都很簡單
這邊提供兩種:
//路徑我先寫死,方便測試
string filePath = Server.MapPath("~/images/2.jpg");
//有檔案的資訊,做事比較方便
FileInfo f = new FileInfo(filePath);
using (Image originalImage = Image.FromFile(filePath))
{
//第一種:用GetThumbnailImage()製作縮圖
using (Image b = originalImage.GetThumbnailImage(width, height, null, IntPtr.Zero))
{
b.Save(@"c:\temp\GetThumbnailImage_" + f.Name, originalImage.RawFormat);
}
//第二種:建立新的Bitmap,產生畫布將圖畫上去
using (Bitmap bitmap = new Bitmap(width, height))
{
using (Graphics g = Graphics.FromImage(bitmap))
{
//設定高品質插值法
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
//是否要使用平滑化處理
g.SmoothingMode = SmoothingMode.HighQuality;
g.Clear(Color.Transparent);
g.DrawImage(originalImage,
new Rectangle(0, 0, width, height),
new Rectangle(0, 0, originalImage.Width, originalImage.Height),
GraphicsUnit.Pixel);
bitmap.Save(@"c:\temp\Graphics_" + f.Name, originalImage.RawFormat);
}
}
}
兩種都可以用,但我實在看不太出來哪種品質比較好@@,
所以有興趣的可以自己試試看囉。
原圖是 540 * 720 ,縮圖成 135*180
由於Jcrop是別人的 plugin,而且我也沒有修改的很多,因此這邊我就不分享出來啦
如果真的有需要的人,可以私底下跟我要。
等我把自己的plugin寫出來再來這邊分享囉。
參考資料: