网页中生成ZIP文件,Zip 压缩、解压技术在 HTML5 浏览器中的应用

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篇》。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/344786.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【复现】含能量路由器的交直流混合配电网潮流计算

目录 1 主要内容 2 理论及模型 3 程序结果 4 下载链接 1 主要内容 程序复现《含能量路由器的交直流混合配电网潮流计算》&#xff0c;主要是对算例4.1进行建模分析&#xff0c;理论和方法按照文献所述。能量路由器&#xff08;ER&#xff09;作为新兴的电力元器件&#xff…

【机器学习】机器学习引领AI:重塑人类社会的新纪元

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀机器学习引领AI &#x1f4d2;1. 引言&#x1f4d5;2. 人工智能&#xff08;AI&#xff09;&#x1f308;人工智能的发展&#x1f31e;应用领…

2024 年最新 Python 基于百度智能云实现短语音识别详细教程

百度智能云语音识别 采用国际领先的流式端到端语音语言一体化建模算法&#xff0c;将语音快速准确识别为文字&#xff0c;支持手机应用语音交互、语音内容分析、机器人对话等场景。百度短语音识别可以将 60 秒以下的音频识别为文字。适用于语音对话、语音控制、语音输入等场景…

轻松连接远程服务器SecureCRT for Mac/Windows

SecureCRT是一款功能强大的终端仿真器和文件传输工具&#xff0c;专为网络管理员、开发人员和系统工程师设计。它支持SSH、Telnet、RDP和串口等多种协议&#xff0c;提供安全、高效的远程访问和管理体验。SecureCRT具有多窗口/多标签管理、自定义终端仿真、颜色方案优化等高级功…

【c语言】qsort函数及泛型冒泡排序的模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、qsort函数 1.回调函数 2.qsort函数 3.void* 指针 二、泛型冒泡排序的模拟实现 1.比较函数的编写 2.交换函数的编写 3.冒泡排序的编写 4…

【TB作品】MSP430F5529 单片机,数字时钟设计与实现,整点时通过蜂鸣器播放音乐进行报时

基于单片机的数字时钟设计与实现 作品名称 基于MSP430单片机的OLED显示数字时钟 作品功能 本作品实现了一个具有时间显示和整点报时功能的数字时钟。通过OLED屏幕显示当前时间&#xff0c;用户可以通过按键设置时间&#xff0c;并在整点时通过蜂鸣器播放音乐进行报时。 作…

WPF Treeview控件开虚拟化后定位节点

不开虚拟化&#xff0c;可以用下面的方法直接定位 <Window x:Class"WpfApplication2.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"Title"Main…

LabVIEW实现汽车逆变器功能测试系统

​介绍了如何利用LabVIEW开发汽车逆变器&#xff08;包括功率板和控制板&#xff09;的自动测试设备&#xff08;ATE&#xff09;&#xff0c;实现对额定800V电压、300A电流的逆变器进行功能测试。系统通过CAN2.0通讯协议&#xff0c;实现电机控制、温度传感器监测、电压校验和…

linux经典例题编程

编写Shell脚本&#xff0c;计算1~100的和 首先vi 1.sh,创建一个名为1.sh的脚本&#xff0c;然后赋予这个脚本权限&#xff0c;使用命令chmod 755 1.sh&#xff0c;然后就可以在脚本中写程序&#xff0c;然后运行。 shell脚本内容 运行结果&#xff1a; 编写Shell脚本&#xf…

IT闲谈-Kylin入门教程

目录 一、引言二、Kylin简介三、环境准备四、安装与配置五、数据导入与建模六、查询与分析七、总结 一、引言 Apache Kylin是一个开源的分布式分析引擎&#xff0c;旨在提供Hadoop/Spark之上的SQL接口及多维分析&#xff08;OLAP&#xff09;能力以支持超大规模数据。Kylin通过…

单链表复习 (C语言版)

目录 一.顺序表与链表的区别 二.链表概念 三.单链表 1.单链表的开始与初始化 2.单链表的打印 3.单链表的尾插 重难点&#xff1a;单链表实现时的指针详解 4.单链表的头插 5.单链表的尾删 6.单链表的头删 小结&#xff1a; 7.单链表的查找 8.在指定位置前插入数据 …

王学岗鸿蒙开发(北向)——————(四、五、六)ArkUi声明式组件

普通组件 1,注意&#xff0c;如上图&#xff0c;build只能有一个根节点 2,Entry表示程序的入口 Component表示自定义的组件 Preview表示可以预览 3&#xff0c;图片存放的地方 4&#xff0c; Image组件最好只给宽度&#xff0c;给了高度又给宽度容易失真。 build() {Row() {/…

24考研408大变化,25考研高分上岸规划+应对策略

巧了&#xff0c;我有现成的经验&#xff1a; 数学和专业课的成绩都不高不低&#xff0c;刚好够用&#xff0c;其实408想上岸&#xff0c;不仅仅要学好408&#xff0c;还要学好考研数学&#xff0c;这是我的肺腑之言&#xff0c;我复试的时候&#xff0c;我知道的那些没有进复试…

【SQLAlChemy】常见的数据类型有哪些,Column可选的参数有哪些呢?

常见数据类型与Column参数 常见类型 Integer&#xff1a;整数类型&#xff0c;对应数据库的 int 类型。Float&#xff1a;浮点数类型&#xff0c;对应数据库的 float 类型。它占用 32 位空间。Double&#xff1a;双精度浮点数类型&#xff0c;对应数据库的 double 类型&#…

鸿蒙开发接口安全:【@system.cipher (加密算法)】

加密算法 说明&#xff1a; 本模块首批接口从API version 3开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import cipher from system.ciphercipher.rsa rsa(Object): void RSA 算法加解密。 系统能力&#xff1a; SystemCapabil…

ChatTTS 文字生成语言本地模型部署

ChatTTS部署 官方信息 [ChatTTS首页](https://chattts.com/)搭建步骤 1、下载源码 git clone https://github.com/2noise/ChatTTS.git 2、按照环境 pip install torch ChatTTS pip install -r requirements.txt 3、下载模型 git clone https://www.modelscope.cn/pzc163/ch…

深入解读Prometheus Adapter:云原生监控的核心组件

一、引言 Prometheus Adapter的背景与重要性 在现代的云原生架构中&#xff0c;微服务和容器化技术得到了广泛的应用。这些技术带来了系统灵活性和扩展性的提升&#xff0c;但同时也增加了系统监控和管理的复杂度。Prometheus作为一款开源的监控系统&#xff0c;因其强大的指标…

vuInhub靶场实战系列--prime:2

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置1.1 靶场信息1.2 靶场配置 二、信息收集2.1 主机发现2.1.1 netdiscover2.1.2 nmap主机扫描2.1.3 arp-scan主机扫描 2.2 端口扫描…

【面试干货】MySQL 三种锁的级别(表级锁、行级锁和页面锁)

【面试干货】MySQL 三种锁的级别&#xff08;表级锁、行级锁和页面锁&#xff09; 1、表级锁2、行级锁3、页面锁4、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在 MySQL 数据库中&#xff0c;锁是控制并发访问的重要机制&#xff0…

队列和栈的实现

本节讲解的队列与栈&#xff0c;如果你对之前的线性和链式结构顺利掌握了&#xff0c;那么下边的队列和栈就小菜一碟了。因为我们会用前两节讲到的东西来实现队列和栈。 之所以放到一起讲是因为这两个东西很类似&#xff0c;队列是先进先出结构(FIFO, first in first out)&…