软件解压后如何安装（安卓解压缩软件app推荐）
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 模型加载的时候能够获取得到模型所需要的图片资源。