Zip 壓縮、解壓技術在 HTML5 瀏覽器中的應用

hightopo發表於2015-04-13
HTML瀏覽器

JSZip 是一款可以建立、讀取、修改 .zip 檔案的 javaScript 工具。在 web 應用中，免不了需要從 web 伺服器中獲取資源，如果可以將所有的資源都合併到一個 .zip 檔案中，這時候只需要做一次請求，這樣既減少了伺服器的壓力，同時也可以加快 web 應用的呈現速度。
今天就來探討下 JSZip 如何與 HT 拓撲應用結合。先來看看這期 Demo 的效果圖：
圖片描述
第一步、需要將應用對相關資源打包成 .zip 檔案，
圖片描述
這是我要壓縮的檔案列表，把響應的資原始檔存放到對應的資料夾下，然後在 loadorder 檔案中標明資源載入的順序，loadorder 檔案內容如下：

'js/ht.js',
'js/ht-obj.js',
'js/ht-modeling.js',
'obj/equipment.mtl',
'obj/equipment.obj',
'image/equipment.jpg'

在資源載入順序中，要標明響應資源的相對於 .zip 檔案的路徑，這樣方便在讀取 .zip 檔案時快速找到相應的資原始檔。
第二步、在 html 檔案中引入 JSZip 和 JSZipUtils 庫，接下來就是請求 .zip 檔案，並對 .zip 檔案做解析處理。

JSZipUtils.getBinaryContent('res/ImportObj.zip', function(err, data) {
    if(err) {
        throw err; // or handle err
    }
    var zip = new JSZip(data);

    var loadorderStr = zip.file('loadorder').asText(),
            order;
    eval('order = [' + loadorderStr + ']');
    var len = order.length,
            image = {},
            mtlStr = '',
            objStr = '';
    for(var i = 0; i < len; i++) {
        var fileName = order[i];
        if(fileName.indexOf('js/') >= 0) {
            var js = document.createElement('script');
            js.innerHTML = zip.file(fileName).asText();
            document.getElementsByTagName('head')[0].appendChild(js);
        } else if(fileName.indexOf('image/') >= 0) {
            var buffer = zip.file(fileName).asArrayBuffer(),
                    str = _arrayBufferToBase64(buffer),
                    pIndex = fileName.indexOf('.'),
                    type = fileName.substr(pIndex + 1),
                    re = 'data:image/' + type + ';base64,';

            image[fileName] = re + str;
        } else if(fileName.indexOf('obj/') >= 0) {
            var str = zip.file(fileName).asText();
            if(fileName.indexOf('.mtl') > 0) {
                mtlStr = str;
            } else if(fileName.indexOf('.obj') > 0) {
                objStr = str;
            }
        }
    }

    init(objStr, mtlStr, image);
});

首先透過 JSZipUtils 獲取 .zip 檔案，將獲取到的檔案內容透過 new JSZip(data) 方法載入到 zip 變數中，透過 zip.file(fileName) 讀取 loadorder 檔案內容，試用 eval 命令動態執行指令碼，將文字內容轉換為 js 變數 order，最後透過遍歷 order 變數，將 js 資源動態引入到頁面中。
在 .zip 檔案中有包含圖片檔案，JSZip 只能獲取到圖片檔案的 ArrayBuffer 資料，這時需要將 ArrayBuffer 轉換為 Base64 才能夠為瀏覽器所識別，所以這裡定義了一個轉換函式：_arrayBufferToBase64

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

這次的案例中，有涉及到 3D 模型資料與 HT 3D 拓撲應用的結合，在 .zip 檔案中的 obj 目錄就是存放 3D 模型資料，在檔案讀取中，將 3D 模型資料以文字對形勢讀取出來存放到變數中，再將資料傳遞到 init 函式中，透過 ht.Default.parseObj() 方法將 3D 模型資料載入到 HT 中。

function init(objStr, mtlStr, image) {
    dataModel = new ht.DataModel();
    g3d = new ht.graph3d.Graph3dView(dataModel);

    view = g3d.getView();
    view.className = 'main';
    document.body.appendChild(view);
    window.addEventListener('resize', function (e) {
        g3d.invalidate();
    }, false);

    g3d.setEye([0, 500, 1000]);
    g3d.setCenter([0, 200, 0]);
    g3d.setGridVisible(true);
    g3d.setGridColor('#74AADA');

    var param = {
        shape3d: 'E1',
        center: true,
        cube: true
    };

    var modelMap = ht.Default.parseObj(objStr, mtlStr, param);
    for(var model in modelMap) {
        var map = modelMap[model],
                i = map.image,
                index = i.lastIndexOf('/'),
                fileName = i.substr(index + 1),
                rawS3 = map.rawS3;
        for(var imgName in image) {
            if(imgName.indexOf(fileName) >= 0) {
                ht.Default.setImage(i, 256, 256, image[imgName]);
            }
        }
    }

    var node = new ht.Node();
    node.s({
        'shape3d': 'E1',
        'wf.visible': 'selected',
        'wf.width': 3,
        'wf.color': '#F7F691'
    });
    node.s3(param.rawS3);
    node.p3(0, param.rawS3[1]/2, 0);
    dataModel.add(node);
}

上述是生成 3D 拓撲、3D 模型引入和引用 3D 模型建立拓撲節點的程式碼。其中那段 setImage 的程式碼需要特別注意，為什麼我要大費周張的去判斷 image 的檔名呢，那是因為在 mtl 3D 模型描述檔案中有一個設定貼圖的屬性，該屬性可以指定檔案的絕對路徑，也可以指定檔案的相對路徑，因為採用 JSZip 無法將 .zip 中的檔案內容寫回到本地目錄中，所以只能將貼圖屬性對應的屬性名稱作為 HT 中的 image 名稱設定到 HT 中，以便 HT 模型載入的時候能夠獲取得到模型所需要的圖片資源。HT 3D 拓撲的應用可以參考《3D拓撲自動佈局之Node.js篇》。
JSZip 在壓縮或解壓資料的時候，如果出現速度較慢的情況，可以考慮使用 Web Worker，Web Worker的具體應用可以參考《3D拓撲自動佈局之Web Workers篇》。

相關文章