Application of ZIP compression and decompression technology in HTML5 browser

Jszip is a javaScript tool that can create, read, and modify. zip files. In a Web application, you need to get resources from a Web server, and if you can merge all of your resources into a single. zip file, you only need to make one request at a time, which reduces the pressure on the server and speeds up the rendering of your Web application.

Discuss how the next jszip can be combined with the HT topology application today. Let's take a look at this Demo:

The first step is to package the app into a. zip file for the relevant resources,

This is the list of files that I want to compress, the response resource file is stored in the corresponding folder, and then in the Loadorder file to indicate the order of the resource loading, the Loadorder file contents are 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 load order, indicate the path of the response resource relative to the. zip file, which makes it easy to quickly find the appropriate resource file when reading the. zip file.

The second step, introducing the Jszip and jsziputils libraries in the HTML file, is to 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 ('. '),         &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;TYPE&NBSP;=&NBSP;FILENAME.SUBSTR ( PINDEX&NBSP;+&NBSP;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 get the. zip file via jsziputils , load the retrieved file contents into the zip variable via the new Jszip method, read the Loadorder file contents through Zip.file (fileName), try E The Val command dynamically executes the script, converts the text content to the JS variable order, and finally introduces the JS resource to the page by traversing the order variable.

In the. zip file contains the picture file, Jszip can only obtain the ArrayBuffer data of the picture file, the need to convert ArrayBuffer to Base64 to be recognized by the browser, so here defines a conversion function: _ 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, there is a combination of 3D model data and HT 3D topology application, in the. zip file, the obj directory is the 3D model data, in the file read, the model data in the text to the situation read out into the variable, and then pass the data to the Init letter Number, through HT. The Default.parseobj () method loads the model data into 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,    &nbSp;    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)  {        &nbSp;    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 that generates a 3D topology , introduces a 3D model, and references a 3D model to create a topology node. One of the setimage code needs to pay special attention, why do I have to take the time to judge the file name of image, that is because in the MTL 3D model description file has a property to set the map, the property can specify the absolute path of the file, you can also specify the relative path of the file, because the Jszip cannot write the contents of the file in the. zip back to the local directory, so you can only set the attribute name of the map property to HT as the image name in HT, so that the HT model can get the picture resources needed to get the model when it is loaded. Applications for HT 3D topologies can be found in thenode. JS chapter of the 3D topology auto-layout .

Jszip when compressing or decompressing the data, if there is a slow situation, you can consider using the Web Worker,web Worker specific application can refer to the3D topology automatic layout of the Web workers chapter .

Application of ZIP compression and decompression technology in HTML5 browser