Exemple de code d'application de la technologie de compression et de décompression Zip en HTML5 (image)

JSZip est un outil javaScript qui peut créer, lire et modifier des fichiers .zip. Dans les applications Web, il est inévitable d'obtenir des ressources du serveur Web. Si toutes les ressources peuvent être fusionnées dans un fichier .zip, une seule requête est requise, ce qui non seulement réduit la pression sur le serveur, mais accélère également le Web. processus. La vitesse de rendu de l’application.

Aujourd'hui, nous allons discuter de la façon de combiner JSZip avec l'application HT . Jetons un coup d'œil aux rendus de cette démo :

La première étape consiste à regrouper l'application et les ressources associées dans un fichier .zip,

Voici la liste des fichiers que je souhaite compresser, stocker les fichiers de ressources correspondants dans le dossier correspondant, puis indiquer le chargement de la ressource dans l'ordre de chargement file Dans l'ordre, le contenu du fichier loadorder est le suivant :

'js/ht.js',

'js/ht-obj.js',

'js/ht-modeling.js',

'obj/equipment.mtl',

'obj/equipment.obj',

'image/equipment.jpg'

Dans l'ordre de chargement des ressources, le chemin de la ressource de réponse par rapport au fichier .zip doit être indiqué , afin que cela soit pratique lors de la lecture du fichier .zip. Recherchez rapidement les fichiers de ressources correspondants.

La deuxième étape consiste à introduire JSZip et la bibliothèque JSZipUtils dans le fichier html. L'étape suivante consiste à demander le fichier .zip et à analyser le fichier .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(&#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);
});

Obtenez d'abord le fichier .zip via JSZipUtils, et chargez le contenu du fichier obtenu dans le zip variable< via le nouveau JSZip (données ) méthode 🎜>, lisez le contenu du fichier loadorder via zip.file(fileName), utilisez la commande eval pour exécuter dynamiquement le script, convertissez le contenu du texte dans l'ordre de la variable js, et enfin, en parcourant la variable order, introduisez dynamiquement le js dans la page.

Il y a des fichiers image dans le fichier .zip. JSZip ne peut obtenir que les données ArrayBuffer du fichier image. À ce stade, l'ArrayBuffer doit être converti en Base64 pour être reconnu par. le navigateur, donc Une fonction de conversion est définie ici : _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 );
}

Dans ce cas, il s'agit de données de modèle 3D et de topologie 3D HTEn combinaison avec des applications, le répertoire obj dans le fichier .zip stocke les données du modèle 3D. Lors de la lecture du fichier, les données du modèle 3D sont lues sous forme de paires de textes et stockées dans des variables, puis les données sont transmises au fichier. fonction init. Chargez les données du modèle 3D dans HT via la méthode ht.Default.parseObj().

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

Ce qui précède est le code pour générer une topologie 3D, une introduction au modèle 3D et un référence modèle 3D pour créer des nœuds de topologie. Le code setImage nécessite une attention particulière. Pourquoi dois-je me donner tant de mal pour déterminer le nom de fichier de l'image ? C'est parce qu'il existe un attribut pour définir la texture dans le fichier de description du modèle 3D mtl. L'attribut peut spécifier le chemin absolu du fichier ou le chemin relatif du fichier. Étant donné que JSZip ne peut pas réécrire le contenu du fichier dans le .zip dans le répertoire local, le nom d'attribut correspondant à l'attribut de texture ne peut être utilisé que comme HT est défini sur HT afin que lorsque le modèle HT est chargé, les ressources d'image requises par le modèle puissent être obtenues. Pour l'application de la topologie HT 3D, veuillez vous référer à "Mise en page automatique de la topologie 3D - Node.jsPartie ".

JSZip

Si la vitesse est lente lors de la compression ou de la décompression des données, vous pouvez envisager d'utiliser Web Worker.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!