PHP+JS(pako)前后端数据压缩,节省带宽方案(Uint8Array与Base64互转、gzip压缩、gzinflate、gzdeflate、zlib、大数据压缩)

原创已于 2022-05-10 14:11:34 修改 · 置顶 · 5.7w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #php

于 2021-04-03 16:30:18 首次发布

javascript 同时被 2 个专栏收录

47 篇文章

订阅专栏

php

44 篇文章

订阅专栏

本文介绍了如何使用JavaScript的pako库和PHP进行数据压缩与解压，涉及Uint8Array与Base64的转换，包括前端JS压缩后端PHP解压及反之的场景，适用于节省带宽的解决方案。注意事项提到前端可单独引入压缩或解压脚本，PHP环境需兼容4.0.4及以上版本。

一、准备工具

1.pako脚本库

github地址 | 我的csdn资源地址

2.前端Uint8Array与Base64互转函数（代码如下）

// uint8array转为base64字符串
function uint8arrayToBase64(u8Arr) {
    let CHUNK_SIZE = 0x8000; //arbitrary number
    let index = 0;
    let length = u8Arr.length;
    let result = '';
    let slice;
    while (index < length) {
        slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
        result += String.fromCharCode.apply(null, slice);
        index += CHUNK_SIZE;
    }
    // web image base64图片格式: "data:image/png;base64," + b64encoded;
    // return  "data:image/png;base64," + btoa(result);
    return btoa(result);
}
// base64字符串转为uint8array数组
function base64ToUint8Array(base64String) {
    let padding = '='.repeat((4 - base64String.length % 4) % 4);
    let base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');
    let rawData = window.atob(base64);
    let outputArray = new Uint8Array(rawData.length);
    for (var i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

二、具体用法案例

1.前端JS压缩+后端PHP解压

// JS压缩，注意：需要引入dist/pako_deflate.js(仅支持压缩)或dist/pako.js(支持压缩和解压)
var rawData = {title:"this is pako.defalte test",author: "slongzhang@qq.com", date: "2021-04-02", content: "test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test"}
var binaryString = pako.deflateRaw(JSON.stringify(rawData), { to: 'string' });
var compressedBase64  = uint8arrayToBase64(binaryString);
console.log(compressedBase64);// q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA

在这里插入图片描述

// PHP解压
$base64String = 'q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA';
print_r(gzinflate(base64_decode($base64String)));

在这里插入图片描述

2.后端PHP压缩+前端JS解压

// php压缩
$array = array(
	"title" 			=> "this is pako.defalte test",
	"author"			=> "slongzhang@qq.com",
	"date"				=> "2021-04-02",
	"content" 			=> "test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test"
);
function compress($str) { return base64_encode(gzdeflate($str, 9)); }
echo compress(json_encode($array,256));
// q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA

在这里插入图片描述

// JS解压，注意：需要引入dist/pako_inflate.js(仅支持压缩)或dist/pako.js(支持压缩和解压)
var decompress = function(str){
    return pako.inflateRaw(base64ToUint8Array(str), {to: 'string'});
}
var rawData = decompress('q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA');
console.log(rawData);