C# 搭配jQuery Jcrop plugin 製作圖片縮圖

2010-10-12

11558
0
jQuery

最近在設計一個結合圖片上傳、縮圖、裁圖的整合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寫出來再來這邊分享囉。

參考資料：

Jcrop Api

Image.GetThumbnailImage 方法

回首頁