因为项目需要压缩字符串和二进制，找到了pako这个库：
https://github.com/nodeca/pako
https://gitee.com/renew_old_romance/pako/tree/master
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/pako/index.d.ts
一、简单介绍
参考Javascript 简单实现Gzip 压缩字符串 基于pako.js
<script>
function input() {
const input = document.getElementById('input').value;
const ys = zip(input);
const jy = unzip(ys);
document.getElementById('yw').innerText = input;
document.getElementById('ys').innerText = ys;
document.getElementById('jy').innerText = jy;
document.getElementById('ysl').innerText =
(Math.round(length(ys) / length(input) * 10000) / 100.00 + "%");
}
// 解压
function unzip(b64Data) {
let strData = atob(b64Data);
const charData = strData.split('').map(function (x) {
return x.charCodeAt(0);
});
const binData = new Uint8Array(charData);
const data = pako.inflate(binData);
strData = String.fromCharCode.apply(null, new Uint16Array(data));
return decodeURIComponent(strData);
}
// 压缩
function zip(str) {
const binaryString = pako.gzip(encodeURIComponent(str), {to: 'string'})
return btoa(binaryString);
}
// 占用字节数计算(UTF-8)
function length(str) {
let total = 0, charCode, i, len;
for (i = 0, len = str.length; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode <= 0x007f) {
total += 1;
} else if (charCode <= 0x07ff) {
total += 2;
} else if (charCode <= 0xffff) {
total += 3;
} else {
total += 4;
}
}
return total;
}
</script>
二、二进制压缩/解压缩
//压缩
public static deflatePlan(b: model_a.Byte): Uint8Array {
return pako.deflate(new Uint8Array(b.buffer));
}
//解压
public static inflatePlan(b: Uint8Array): Uint8Array {
return pako.inflate(b);
}
1.压缩后存储成本地文件
let e = PlanTool.encodePlan(data);
console.log("编码数据:", e);
let d = PlanTool.decodePlan(e);
console.log("画墙方案编码然后解码:", d);
//压缩后存储
let plan = PlanTool.deflatePlan(e);
PlanTool.saveForWebBrowser(new Blob([plan.buffer]), "plan");
//---------------------------------------------
// let str = JSON.stringify(obj);
// let b = new Blob([str]);
public static saveForWebBrowser(b: Blob, fileName: string) {
let downloadLink = document.createElement('a');
downloadLink.download = fileName;
downloadLink.innerHTML = 'Download File';
if (window.URL != null) {
downloadLink.href = window.URL.createObjectURL(b);
} else {
downloadLink.href = window.URL.createObjectURL(b);
downloadLink.onclick = () => {
document.body.removeChild(downloadLink);
};
downloadLink.style.display = 'none';
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
2.加载本地文件后，解压缩
//https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
let oReq = new XMLHttpRequest();
oReq.open("GET", "resources/plan.txt", true);
oReq.responseType = "arraybuffer";
oReq.onload = () => {
let arrayBuffer = oReq.response as ArrayBuffer; // 注意:不是oReq.responseText
if (arrayBuffer) {
//解压
let byteArray = new Uint8Array(arrayBuffer);
let d = PlanTool.inflatePlan(byteArray);
//解码
let b = new model_a.Byte(d.buffer);
let decodeData = PlanTool.decodePlan(b);
console.log("画墙方案编码然后解码:", decodeData);
let scene = Eventtower.instance.getAtt(TGetGloba.GET_STAGE_MANAGER).scene;
let idToContent = Eventtower.instance.getAtt(TGetGloba.GET_STAGE_MANAGER).idToContent;
scene.decodeToObject(decodeData, idToContent);
//性能测试
PlanTool.benchmarkDecodePlan(b);
PlanTool.benchmarkInflatePlan(byteArray);
}
};
oReq.send(null);
三、字符串压缩/解压缩
private unzip(b64Data) {
var strData = atob(b64Data);
// Convert binary string to character-number array
var charData = strData.split('').map(function (x) { return x.charCodeAt(0); });
// Turn number array into byte-array
var binData = new Uint8Array(charData);
// unzip
var data = pako.inflate(binData);
// Convert gunzipped byteArray back to ascii string:
return this.ab2str(data);
}
private zip(str) {
var binaryString = pako.gzip(str, { to: 'string' });
let v = this.ab2str(binaryString as any);
return btoa(v);
}
// ArrayBuffer转为字符串，参数为ArrayBuffer对象
private ab2str(buf: ArrayBuffer): string {
var binaryString = '';
let bytes = new Uint16Array(buf);
let length = bytes.length;
for (var i = 0; i < length; i++) {
binaryString += String.fromCharCode(bytes[i]);
}
return binaryString;
}
因为字符串需要与后端通讯，所以使用了bota/atob进行base64编码。
1.ArrayBuffer转为字符串的问题
关于字符串与二进制处理，可以参考jsmpeg系列一 基础知识 字符处理 ArrayBuffer TypedArray，其中提到了ArrayBuffer与字符串的互相转换。
ArrayBuffer转为字符串，或者字符串转为ArrayBuffer，有一个前提，即字符串的编码方法是确定的。假定字符串采用UTF-16编码（JavaScript的内部编码方式），可以自己编写转换函数。
// ArrayBuffer转为字符串，参数为ArrayBuffer对象
function ab2str(buf) {
return String.fromCharCode.apply(null, new Uint16Array(buf));
}
// 字符串转为ArrayBuffer对象，参数为字符串
function str2ab(str) {
var buf = new ArrayBuffer(str.length*2); // 每个字符占用2个字节
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i<strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
但是，ab2str这种写法，在实际使用中，如果buf过大，会有Maximum call stack size exceeded堆栈溢出。
可以参考javascript - js数组转字符串 - 在字符串和ArrayBuffers之间转换，改为for的写法：
var
binaryString = '',
bytes = new Uint8Array(arrayBuffer),
length = bytes.length;
for (var i = 0; i < length; i++) {
binaryString += String.fromCharCode(bytes[i]);
}
网友评论