Code example of application of Zip compression and decompression technology in HTML5 (picture)

JSZip is a javaScript tool that can create, read, and modify .zip files. In web applications, it is inevitable to obtain resources from the web server. If all resources can be merged into a .zip file, then only one request is required, which not only reduces the pressure on the server, but also speeds up the web process. The application's rendering speed.

Today let’s discuss how JSZip is combined with HT applications. Let’s take a look at the renderings of this Demo:

The first step is to package the application and related resources into a .zip file,

#This is the list of files I want to compress, store the corresponding resource files in the corresponding folder, and then indicate the resource loading in the loadorder file In order, 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 order, the path of the response resource relative to the .zip file should be indicated, so that it can be quickly found when reading the .zip file. Corresponding resource files.

The second step is to introduce JSZip and the JSZipUtils library into the html file. The next step 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(&#39;js/&#39;) >= 0) {
            var js = document.createElement(&#39;script&#39;);
            js.innerHTML = zip.file(fileName).asText();
            document.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
        } else if(fileName.indexOf(&#39;image/&#39;) >= 0) {
            var buffer = zip.file(fileName).asArrayBuffer(),
                    str = _arrayBufferToBase64(buffer),
                    pIndex = fileName.indexOf(&#39;.&#39;),
                    type = fileName.substr(pIndex + 1),
                    re = &#39;data:image/&#39; + type + &#39;;base64,&#39;;

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

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

First obtain the .zip file through JSZipUtils, and load the obtained file content into the zip through the new JSZip(data) method Variable , read the loadorder file content through zip.file(fileName), use the eval command to dynamically execute the script, convert the text content into the js variable order, and finally, by traversing the order variable, dynamically introduce the js resource into the page.

There are image files in the .zip file. JSZip can only obtain the ArrayBuffer data of the image file. At this time, the ArrayBuffer needs to be converted to Base64 to be recognized by the browser, so 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 );
}

This case involves 3D model data and HT 3D topology application The obj directory in the .zip file stores 3D model data. During file reading, the 3D model data is read out in the form of text pairs and stored in variables, and then the data is passed to the init function, through ht The .Default.parseObj() method loads 3D 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,
        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 to generate 3D topology, 3D model introduction and reference 3D model creation topology node. The setImage code needs special attention. Why do I have to go through so much trouble to determine the file name of the image? That’s because there is a attribute for setting the texture in the mtl 3D model description file. This The attribute can specify the absolute path of the file or the relative path of the file. Because JSZip cannot write the file contents in the .zip back to the local directory, the attribute name corresponding to the texture attribute can only be used as HT# The image name in ## is set to HT so that when the HT model is loaded, the image resources required by the model can be obtained. For the application of HT 3D topology, please refer to "3D Topology Automatic Layout Node.jsPart".

JSZip If the speed is slow when compressing or decompressing data, you can consider using Web Worker.

The above is the detailed content of Code example of application of Zip compression and decompression technology in HTML5 (picture). For more information, please follow other related articles on the PHP Chinese website!