前边都是废话&＃xff0c;直接从第四段开始看
对于一些html的动画页面&＃xff0c;canvas动画页面&＃xff0c;会需要大量的图片文件。一张一张的从服务器获取图片&＃xff0c;会影响页面的显示。
怎样提高动画的效果&＃xff0c;可以写一个load页面&＃xff0c;然后通过js把图片先从服务器加载下来&＃xff0c;避免在动画的时候&＃xff0c;保证动画的流畅性。但是问题来了&＃xff0c;在有大量图片的页面里&＃xff0c;需要大量的请求数&＃xff0c;在前端优化里就有提到要减少请求数&＃xff0c;雪碧图很好&＃xff0c;但是每次都要找设计给你拼好&＃xff0c;当然&＃xff0c;自己花点时间也是可以掌握这个东西&＃xff0c;去做。但是有没有一种程序的方式&＃xff0c;把图片整合&＃xff0c;然后运用呢&＃xff0c;重点来了&＃xff0c;往下看。
图片基本上都是一些二进制数据的拼接&＃xff0c;对我要整合的就是这些二进制数据。前提知识点&＃xff0c;nodejs(不需要很多)中的文件操作就是 fs 了&＃xff0c;文件的读、写。接下来就是js中的 API ArrayBuffer&＃xff0c;还有他的两个视图TypedArray和DataView。还有blob&＃xff0c;都用的比较浅&＃xff0c;我本人也是初接触这些。
压缩阶段&＃xff1a; 通过nodejs来进行压缩&＃xff0c;很好的一点通过nodejs的 fs 读取到的文件是一个buffer数据。在前端用过js可以完美解析
由于nodejs读取文件的一个便利性&＃xff0c;所以压缩主要是&＃xff0c;读取文件然后设置文件的存储规则&＃xff0c;我的文件基本是每个图片包括四部分&＃xff1a; 图片名称的大小(指字节数)&＃43;图片名称&＃43;图片文件的大小&＃43;图片的二进制文件&＃xff0c;前边三部分通过Uint32来存储&＃xff0c;存储方式是一个默认的小端字节序。
上代码&＃xff1a;
var fs &＃61; require(&＃39;fs&＃39;);//所要读取文件的所在的位置 文件夹
var pat &＃61; &＃39;./img/&＃39;;
//生成文件的保存位置与文件名&＃xff0c;文件后缀可以任意
var create &＃61; &＃39;./cgppt/cg.sw&＃39;;var buffer &＃61; new Buffer(0);
var files &＃61; fs.readdirSync(pat);
var count &＃61; files.length;
files.forEach(function(filename) {count--;//读取文件数据var text &＃61; fs.readFileSync(pat &＃43; filename);//将文件的名称以及数据等信息压缩在一起var headerBuffer &＃61; header(filename, text);if(!!headerBuffer) {//将不同文件的二进制数据合并在一起&＃xff0c;并写入文件buffer &＃61; Buffer.concat([buffer, headerBuffer]);if(count &＃61;&＃61; 0) {fs.writeFile(create, buffer, (err) &＃61;> {if (err) throw err;console.log(&＃39;It\&＃39;s saved!&＃39;);});}}
});function header(filename, data) { //整合单个文件数据var text &＃61; fs.readFileSync(pat &＃43; filename);var fileLen &＃61; numToBuffer(filename.length &＃43; 4);if(filename.search(/\.png$|\.jpg$/ig) !&＃61; -1) {var file &＃61; strToBuffer(&＃39;img/&＃39; &＃43; filename);var dataLen &＃61; numToBuffer(text.length);var data &＃61; new Buffer(text);var header &＃61; Buffer.concat([fileLen, file, dataLen, data]);return header;}return false;
}function strToBuffer(data) { //文件名称等信息规则var buffer &＃61; new Buffer(0);var str &＃61; data.toString();for(let i &＃61; str.length - 1; i >&＃61; 0; i--) {var num &＃61; str.charCodeAt(i);var strBuffer &＃61; numToBuffer(num);buffer &＃61; Buffer.concat([strBuffer, buffer]);}return buffer;
}function numToBuffer(num) { //以小端字节序方式将文件大小信息编入var buffer &＃61; new Buffer(4),ppp &＃61; [];ppp[0] &＃61; num % 256;ppp[1] &＃61; num % (256*256) / 256;ppp[2] &＃61; num / (256*256) % (256);ppp[3] &＃61; num / (256*256*256);for (var i &＃61; 0; i
}
前端解析&＃xff1a; 这里就是通过js来解析这个二进制文件&＃xff0c;将通过blob和URL生成的一个链接赋值给img的src&＃xff0c;也可以用于canvas动画
关键代码
while(len < data.byteLength) {//获取文件名的长度var f &＃61; data.getUint32(len, !0);len &＃43;&＃61; 4;var l &＃61; &＃39;&＃39;;//读取文件名for(var c &＃61; 0; c
o.push(l),//文件数组
a.push(d)
}
本文的大部分要点都来自于 阮一峰老师的Javascript标准参考教程&＃xff0c;还有MDN的web技术文档。
本人前端小白&＃xff0c;如有问题还请指正
欢迎转载、交流
参考链接&＃xff1a; 阮一峰 二进制数据、阮一峰 nodejs fs模块、阮一峰 二进制数组
Javascript 标准参考教程&＃xff08;alpha&＃xff09;、MDN
京公网安备 11010802041100号