傳真件如何拆分、在線查看、旋轉

    距離上一篇隨筆過去已經過久，這一大段時間不停的作項目，多個項目中有各式各樣的問題。休假歸來，統一整理一下。

    今天總結的是項目中用到的一個東西，如何在系統中集成傳真收發文，提供在線閱讀、打印、旋轉等功能。對於傳真在線查看這個問題在網上仍是有不少資料的，在此將拆分與查看、以及變態傳真的旋轉總結一下。

一、傳真管理

    這個部分很簡單，寫一個windows服務程序，定時監視傳真機收文文件夾中的tif文件，發現一個就往數據庫裏面寫一條記錄。須要讀取的時候再取出來用。

二、傳真的拆分

     對於傳真的拆分須要用到image類，這個類平時用得較多的應該僅僅是綁定圖片這樣一個簡單的操做，可是打開MSDN看看會嚇一跳，還有這麼多屬性，這麼多類，具體見http://msdn.microsoft.com/zh-cn/library/System.Drawing.Image_properties(v=vs.110).aspx，http://msdn.microsoft.com/zh-cn/library/System.Drawing.Image_methods(v=vs.110).aspx。 對於這些類和方法不少不可知，可是在拆分tif文件的時候剛好須要用到。以下：

拆分tif文件關鍵代碼：

//載入二進制流
MemoryStream ms = new MemoryStream(imgbyte);
System.Drawing.Image img = System.Drawing.Image.FromStream(ms);
//獲取 GUID 的數組，這些 GUID 表示此 Image 中幀的維數
Guid guid = (Guid)img.FrameDimensionsList.GetValue(0);
FrameDimension dimension = new FrameDimension(guid);
//返回指定維度的幀數。
int totalPage = img.GetFrameCount(dimension);

如上所示，已經求到了tif圖片的總幀數，也就是頁數。那接下來就是一頁一頁的取出來另存爲咱們經常使用的jpg圖片了，以下所示：

//構建dt 循環拆分傳真件
DataTable dt = new DataTable();
dt.Columns.Add("name");
dt.Columns.Add("Url");
for (int i = 0; i < totalPage; i++)
{
    //選擇由維度和索引指定的幀(頁)。
    img.SelectActiveFrame(dimension, i);
    //開始將當前頁另存到項目文件夾
    if (!System.IO.File.Exists(Server.MapPath("../Files/") + fax_name + (i + 1) + ".gif"))
    {
        img.Save(Server.MapPath("../Files/") + fax_name + (i + 1) + ".gif", System.Drawing.Imaging.ImageFormat.Gif);//分割圖片進行存儲
    }
    dt.Rows.Add(new object[] { fax_name + (i + 1), "../Files/" + fax_name + (i + 1) + ".gif" });//往dt中添加數據
    urlAll += "../Files/" + fax_name + (i + 1) + ".gif" + ",";
}

整個拆分過程就完畢了，目的是爲了將多頁tif拆分爲多個連續的jgp文件，這樣查看就很簡單了。可是也有個問題，項目文件夾中的圖片會愈來愈多，求高手解決此問題。

還有一些附帶等會兒要用到的代碼：

urlAll = urlAll.Substring(0, urlAll.Length - 1);
string[] arrUrl = urlAll.Split(',');
Count = arrUrl.Length;
for (int i = 0; i <= arrUrl.Length - 1; i++)
{
    urlFirst = arrUrl[0];
}
dt.AcceptChanges();

//構建json對象
StringBuilder data = new StringBuilder();
for (int j = 0; j < dt.Rows.Count; j++)
{
    data.Append("{id:'");
    data.Append((j + 1) + "',src:'");
    data.Append(dt.Rows[j]["Url"].ToString());
    data.Append("'},");
}
DataNew = data.ToString().Substring(0, data.ToString().Length - 1);

這部分不須要多說，就是對字符串的一系列操做，並將第一個圖片做爲進入頁面默認顯示的頁面。並將圖片的id、url寫到json對象中，在頁面查看的時候須要這個對象。

三、傳真的查看

   頁面準備，代碼以下：

<form id="Form1" method="post" runat="server">
    <div style="background-color: #c0c0c0;" align="center">
        <div style="margin-top: 10px;">
            <img src="<%=urlFirst %>" id="imageShow" style="width: 600px; height: 800px;">
        </div>
    </div>
    <div style="width: 100%; background-color: White;" align="center">
        <input type="button" class="left" id="RotateL" >&nbsp;
        <input type="button" class="last" onclick="prov()" />&nbsp;
        <label id="now">
        </label>
        /<label id="total"></label>&nbsp;
        <input type="button" class="next" onclick="next()" />
        <input type="button" class="right" id="RotateR">
    </div>
    </form>

此處的urlFirst在上面那點裏面已經闡述，默認第一頁，這樣的代碼就能夠顯示咱們拆分出來的圖片了。

接下來就是上一頁、下一頁了，代碼以下：

var list = [<%=DataNew %>];
    var this_id = "1";
    $(document).ready(function() {
        $("#now").html("1");
        $("#total").html(list.length);
    });
    //下一個圖片
    function next() {
   
        var json = eval(list);
        for (var i = 0; i < json.length; i++) {
            if (parseInt(json[i].id) > parseInt(this_id)) {
                document.getElementById("imageShow").src = json[i].src;
                this_id = json[i].id;
                $("#now").html(this_id);
                return;
            }
        }
        alert("已是最後一張了！");
    }
    //上一個圖片
    function prov() {
        var json = eval(list);
        for (var i = json.length - 1; i >= 0; i--) {
            if (parseInt(json[i].id) < parseInt(this_id)) {
                document.getElementById("imageShow").src = json[i].src;
                this_id = json[i].id;
                $("#now").html(this_id);
                return;
            }
        }
        alert("已是第一張了！");
    }    

這些代碼你們應該能看明白，實現上下翻頁的功能。在線查看，上下翻頁也就是這樣，接下來應該進入如何旋轉圖片的問題了。

四、圖片旋轉

     之因此會有這樣的需求，仍是由於在傳真發送的過程當中有不少小白會將紙張倒着放，斜着放，這種問題不可避免也頗爲頭痛。所以此功能人民羣衆須要他，因此咱們這些人就要實現它。具體方法以下：

1）、引入jQueryRotate.2.2.js文件，這個文件能夠幹這個事情，這個文件網上能夠搜索到。

2）、開始寫翻轉代碼，以下：

$("#RotateR").click(function(){
                value += 90;
                $("#imageShow").rotate({ animateTo: value });
            })
            
            $("#RotateL").click(function(){
                value -= 90;
                $("#imageShow").rotate({ animateTo: value });
            })

這個翻轉看着很是和諧，流暢。實乃寫代碼必備之良方。

整個過程描述完畢，因爲項目中關聯性太多，不太好釋放源碼，關鍵部分已經一一註明，應該沒有問題。

預告下一篇，完美的報表如何導出到EXCEL、變態的官方公文如何在word中自動生成？