2011年11月23日 星期三

使用C#實現縮圖功能

當我們的網站有提供使用者上傳圖片時,一般我們只會限制上傳圖檔類型,例如:.jpg、.png、.gif等,或者限制上傳圖檔的大小,至於圖檔的維度我們通常無法限制,原因是在於使用者並不是每個人都有能力針對圖檔進行編輯,所以為了讓使用者上傳的圖檔能符合網站設計,我們可以藉由img標籤裡的屬性width及height來設定,但這種設計的方式會有一個問題,當上傳的圖檔很大時多人同時瀏覽可能會耗費大量網站對外的頻寬影響系統其他使用者,所以比較好的作法是當上傳圖檔時除了原始圖檔外再產生一張縮圖,以下將說明我針對這個需求所撰寫的縮圖程式

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;

public class ImageUtility
{
    public ImageUtility()
    {

    }

    public static string ResizeImage(string strFilePath, int longSide)
    {
        float ratio;
        int width;
        int height;
        string suffix = "_s";
        string strDestFilePath;

        if (!File.Exists(strFilePath)) 
        {
            return "";
        }

        if (Path.GetExtension(strFilePath).ToLower() != ".jpg" &&
                Path.GetExtension(strFilePath).ToLower() != ".png" &&
                Path.GetExtension(strFilePath).ToLower() != ".gif") 
        {
            return "";
        }       

        Image img = System.Drawing.Image.FromFile(strFilePath);

        if (!(img.Width > longSide || img.Height > longSide))
        {
            return "";
        }

        if (img.Width > img.Height)
        {
            ratio = (float)longSide / img.Width;
        }
        else 
        {
            ratio = (float)longSide / img.Height;
        }

        width = (int)(img.Width * ratio);
        height = (int)(img.Height * ratio);

        Bitmap bmp = new Bitmap(img, new System.Drawing.Size(width, height));
        strDestFilePath = string.Format(@"{0}\{1}{2}{3}", Path.GetDirectoryName(strFilePath), Path.GetFileNameWithoutExtension(strFilePath), suffix, Path.GetExtension(strFilePath));
        bmp.Save(strDestFilePath);
        
        return strDestFilePath;
    }
}

這個靜態函式是接收原始圖檔目前所在的路徑並產生縮圖,而輸入參數longSide是指縮圖的長邊,舉例來說:如果原始圖檔是維度800X600的圖片,而longSide設定為100的話,那縮圖的維度就是100X75,以下整理函式處理步聚

  1. 檢查原始圖檔是否存在,如果不存在則中止處理。
  2. 檢查原始圖檔是否為.jpg、.png、.gif等格式,如果不是則中止處理。
  3. 當原始圖檔的長寬都小於指定的長度則中止處理。
  4. 以原始圖檔維度中較長的一邊做為縮圖基準,求得縮圖的比率進而得到縮圖後的長寬。
  5. 依得到的長寬產生縮圖,縮圖檔名為:原始檔名_s.副檔名。
上面函式適用於擺放圖檔的父容器是正方形,至於父容器如果是矩形就留待各位看倌思考。

2011年11月10日 星期四

使用javascript拖曳table內容

針對網頁內容進行拖曳相信有許多javascript library可以做到,底下將說明我目前使用的drag and drop javascript library,在實際說明前先說明我的網頁結構,網頁結構是以div包裝資料並放置在table裡的td,每個td代表div所在位置,而拖曳是要將div做位置搬移,以下為拖曳需求

  1. 不能拖曳資料到已含有其他拖曳物件(div)的td
  2. 某些td不可以被放置拖曳物件(div)
接著我們先來看head區塊的程式碼
<head>
    <title></title>
    <style type="text/css">
        .v_title_cell{width:20px; text-align:center; vertical-align:middle}
        .content{width:58px; height:58px; margin:auto; border-style:none; border-width:0px; color:White}
        .cell{width:60px; height:60px; text-align:center; vertical-align:middle}
    </style>
    <script type="text/javascript" src="drag-min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            rd = REDIPS.drag; // reference to the REDIPS.drag class
            // initialization
            rd.init();
            // set hover color
            rd.hover_color = '#9BB3DA';           

            // this function (event handler) is called after element is dropped
            REDIPS.drag.myhandler_dropped = function () {

            }
        }
    </script>
</head>
在head區塊裡有二個地方是一定要撰寫的,第一個是加入drag-min.js檔案,可以點選這裡下載,下載後解壓縮可以在REDIPS_drag目錄下看到redips-drag.js及redips-drag-min.js檔案,擇一引用即可,目前我是引用redips-drag-min.js檔案並將它改名為drag-min.js,另一個要撰寫的是在window.onload事件裡撰寫REDIPS.drag物件的建立及初始,在上面範例有個myhandler_dropped事件,它是指進行拖曳完成後(無論最後是否有改變位置)要引發什麼,更詳細的說明請參考線上文件

接下來我們來看body區塊的程式碼
<body>
    <div id="drag">
        <table style="text-align:center; width:260px; margin:auto" border="1">
            <tr>
                <td class="mark"></td>
                <td class="mark">1</td>
                <td class="mark">2</td>
                <td class="mark">3</td>
            </tr>
            <tr>
                <td class='v_title_cell mark'>2</td>
                <td class="cell single">
                    <div class="content drag" style="background-color:Red">紅</div>
                </td>
                <td class="cell single"></td>
                <td class="cell single"></td>
            </tr>
            <tr>
                <td class='v_title_cell mark'>3</td>
                <td class="cell single">
                    <div class="content drag" style="background-color:Blue">藍</div>
                </td>
                <td class="cell single"></td>
                <td class="cell single"></td>
            </tr>
            <tr>
                <td class='v_title_cell mark'>4</td>
                <td class="cell single">
                    <div class="content drag" style="background-color:Green">綠</div>
                </td>
                <td class="cell single"></td>
                <td class="cell single"></td>
            </tr>
        </table>
    </div>
</body>
body區塊有幾個地方要注意的

  1. table必須放在id名稱為drag的div裡
  2. 如果td不允許放置拖曳物件(div)則class要加上mark
  3. 如果td只允許放置一個拖曳物件(div)則class要加上single
  4. 如果div要成為可拖曳的物件必須在class加上drag

下圖是網頁呈現畫面


下圖為拖曳時的畫面


更多詳細資料請參閱底下連結
http://www.redips.net/javascript/drag-and-drop-table-content/

2011年11月9日 星期三

依據圖片大小自動調整popup window大小

撰寫此篇的源由是目前負責的系統有提供使用者上傳圖片,在未撰寫上傳圖片自動依據長邊縮圖的功能下,只針對前端的img標籤設定寬度及高度,所以使用者在觀看網頁時實際上是下載圖片後再做縮小以達到縮圖效果,那為了讓使用者能觀看原本圖片的原貌則提供了點撃縮圖彈跳出原圖視窗,在這裡有二個需求
  1. popup window希望開啟後能置中
  2. popup window的大小希望能依據圖片實際大小縮放
以下針對部份程式碼做相關說明


當我們為img設定屬性width及height時我們無法取得圖片的實際寬度及高度,所以這裡需要做一些處理,處理步驟
  1. Step1 以二個變數暫存目前縮圖的寬度及高度。
  2. Step2 移除目前縮圖的寬度及高度,目的在取得實際圖片的寛度及高度,並利用二個全域變數暫存實際寬度及高度。
  3. Step3 將Step1取得的寬度及高度回存到圖片物件。
至於為什麼要利用$(window).load而不利用$(document).ready請參考文章最後的相關連結,至於視窗置中部份因為我們的視窗等於圖片的大小,所以只要利螢幕長寬減去實際圖片的長寬除2即可得知未來視窗要放置的位置。

參考