# PHP+JS(pako)前后端數據壓縮,節省帶寬方案 ## **一、準備工具** ### **1.pako腳本庫** github地址：https://github.com/nodeca/pako ### **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壓縮 ~~~ // 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解壓 ~~~ //?PHP解壓 $base64String?=?'q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dI fCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA'; print_r(gzinflate(base64_decode($base64String))); ~~~ ### ### **2.后端PHP壓縮+前端JS解壓** PHP壓縮 ~~~ //?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)); //?q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8d //IfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA ~~~ ### ### JS解壓 ~~~ // JS解壓，注意：需要引入dist/pako_inflate.js(僅支持壓縮)或dist/pako.js(支持壓縮和解壓) var?decompress?=?function(str){ ????return?pako.inflateRaw(base64ToUint8Array(str),?{to:?'string'}); } var?rawData?=?decompress('q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz 8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA' ); console.log(rawData); ~~~ 數據壓縮對比可達8倍  **三、注意事項** **1.前端JS** 必須引入Uint8Array與Base64互轉函數 如果不需要同時處理壓縮和解壓可按需單獨引入腳本pako\_deflate.min.js（壓縮）| pako\_inflate.min.js（解壓）；  如果需要同時處理壓縮和解壓那么請直接引入pako.js ### ### **2.PHP要求(PHP 5.6, PHP 7, PHP 8)** **原文鏈接：https://mp.weixin.qq.com/s/qoYd1SxOVOdipaXLjux8-g**