Application of Zip compression and decompression Technology in HTML5 browsers, ziphtml5

Application of Zip compression and decompression Technology in HTML5 browsers, ziphtml5

JSZip is a javaScript tool that allows you to create, read, and modify. zip files. In web applications, you must obtain resources from the web server. If you can merge all resources into one. in the zip file, you only need to make one request at this time, which not only reduces the pressure on the server, but also speeds up the rendering of web applications.

Today we will discuss how JSZip can be combined with HT topology applications. Let's take a look at this Demo:

Step 1: Package the application resources into a. zip file,

This is the list of files I want to compress. Store the resource files in the corresponding folder and mark the resource Loading Order in the loadorder file. The content of the loadorder file is as follows:

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

In the resource loading sequence, specify the path of the response resource relative to the. zip file, so that you can quickly find the corresponding resource file when reading the. zip file.

Step 2: Introduce the JSZip and JSZipUtils libraries into the html file. Next, request the. zip file and parse the. zip file.

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);});

First, you can get it through JSZipUtils.. file (fileName) reads the content of the loadorder file, uses the eval command to dynamically execute the script, convert the text content to the js variable order, and finally dynamically introduce js resources to the page by traversing the order variable.

In. the zip file contains an image file. JSZip can only obtain the ArrayBuffer data of the image file. In this case, the ArrayBuffer must be converted to Base64 to be recognized by the browser. Therefore, a conversion function is defined here: _ 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 );}

In this case, the combination of 3D model data and HT 3D topology applications is involved. the obj directory in the zip file stores 3D model data. In the file reading, the 3D model data is read in text and stored in the variable, and then transmitted to the init function, through ht. default. the parseObj () method loads 3D model data to 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);}

The above is the code for generating a 3D topology, introducing a 3D model, and referencing a 3D model to create a topology node. The setImage code requires special attention. Why do I need to judge the image file name in large part? That is because the mtl 3D model description file contains an attribute for setting textures, this attribute can specify the absolute path of the file or the relative path of the file, because JSZip cannot be used. the file content in zip is written back to the local directory. Therefore, you can only set the attribute name corresponding to the texture attribute as the image name in HT to HT, so that the HT model can obtain the image resources required by the Model during loading. For the application of HT 3D topology, see Node. js for Automatic Layout of 3D topology.

When JSZip compresses or decompress data, if the speed is slow, you can consider using Web Worker. For specific applications of Web Worker, see Web Workers for Automatic Layout of 3D topology.