为了压缩js文件，把js文件转化成PNG图像，然后用 canvas 控件中的 getImageData() 函数将图像再重新读成js文件，这样可以做到很高的压缩比。
PHP写的压缩方法
1 <?
2 header('Content-type: text/plain');
3
4 $GLOBALS[path] = 'phpgd_images/';
5 $GLOBALS[filter_path] = 'phpgd_filtered_images/';
6
7 define('OUTPUT_FILTERED', 0);
8 define('OUTPUT_8BIT', 1);
9 define('OUTPUT_8BIT_GRAY', 1);
10 define('OUTPUT_24BIT', 1);
11 define('OUTPUT_32BIT', 1);
12
13
14 encode_file('lipsum.txt', 'lipsum');
15 encode_file('jquery-1.4.2.min.js', 'jquery');
16
17
18 ####################################################################################################
19
20 function encode_file($path, $prefix){
21
22 $data = file_get_contents($path);
23 $size = strlen($data);
24
25 echo "$path is $size bytes\n";
26
27
28 #
29 # the simplest method is to store the bytes as they are in ascii.
30 # this is the least space-efficient.
31 #
32
33 $bytes = array();
34 for ($i=0; $i<strlen($data); $i++){
35 $bytes[] = ord(substr($data, $i, 1));
36 }
37
38 store_bytes($bytes, $prefix.'_ascii');
39
40
41 #
42 # next simplest is to store values using 7 bits, so we store 8
43 # characters in every 7 bytes
44 #
45 # 11111112 22222233 33333444 44445555 55566666 66777777 78888888
46 #
47
48 $bytes = array();
49 $seqs = ceil(strlen($data) / 8);
50 for ($i=0; $i<$seqs; $i++){
51
52 $c1 = ord(substr($data, ($i*8)+0, 1));
53 $c2 = ord(substr($data, ($i*8)+1, 1));
54 $c3 = ord(substr($data, ($i*8)+2, 1));
55 $c4 = ord(substr($data, ($i*8)+3, 1));
56 $c5 = ord(substr($data, ($i*8)+4, 1));
57 $c6 = ord(substr($data, ($i*8)+5, 1));
58 $c7 = ord(substr($data, ($i*8)+6, 1));
59 $c8 = ord(substr($data, ($i*8)+7, 1));
60
61 $b1 = (($c1 << 1) | ($c2 >> 6)) & 0xff;
62 $b2 = (($c2 << 2) | ($c3 >> 5)) & 0xff;
63 $b3 = (($c3 << 3) | ($c4 >> 4)) & 0xff;
64 $b4 = (($c4 << 4) | ($c5 >> 3)) & 0xff;
65 $b5 = (($c5 << 5) | ($c6 >> 2)) & 0xff;
66 $b6 = (($c6 << 6) | ($c7 >> 1)) & 0xff;
67 $b7 = ((($c7 << 7) & 0x80) | ($c8 & 0x7f)) & 0xff;
68
69 $bytes[] = $b1;
70 $bytes[] = $b2;
71 $bytes[] = $b3;
72 $bytes[] = $b4;
73 $bytes[] = $b5;
74 $bytes[] = $b6;
75 $bytes[] = $b7;
76 }
77
78 store_bytes($bytes, $prefix.'_seq8');
79 }
80
81 ####################################################################################################
82
83 function store_bytes($bytes, $mode){
84
85 $size = count($bytes);
86
87
88 #
89 # 8b
90 #
91
92 $w = floor(sqrt($size));
93 $h = ceil($size / $w);
94
95 if (OUTPUT_8BIT){
96 create_8b($mode, 'wide', $bytes, $size, 1);
97 create_8b($mode, 'tall', $bytes, 1, $size);
98 create_8b($mode, 'square', $bytes, $w, $h);
99 }
100 if (OUTPUT_8BIT_GRAY){
101 create_8b_gray($mode, 'wide', $bytes, $size, 1);
102 create_8b_gray($mode, 'tall', $bytes, 1, $size);
103 create_8b_gray($mode, 'square', $bytes, $w, $h);
104 }
105
106
107 #
108 # 24b
109 #
110
111 $px = ceil($size / 3);
112
113 $w = floor(sqrt($px));
114 $h = ceil($px / $w);
115
116 if (OUTPUT_24BIT){
117 create_24b($mode, 'wide', $bytes, $px, 1);
118 create_24b($mode, 'tall', $bytes, 1, $px);
119 create_24b($mode, 'square', $bytes, $w, $h);
120 }
121
122
123 #
124 # 32b
125 #
126
127 $px = ceil($size / 4);
128
129 $w = floor(sqrt($px));
130 $h = ceil($px / $w);
131
132 if (OUTPUT_32BIT){
133 create_32b($mode, 'wide', $bytes, $px, 1);
134 create_32b($mode, 'tall', $bytes, 1, $px);
135 create_32b($mode, 'square', $bytes, $w, $h);
136 }
137 }
138
139 ####################################################################################################
140
141 function create_8b($mode, $shape, $bytes, $w, $h){
142
143 $im = imagecreate($w, $h);
144
145 $cols = array();
146 for ($i=0; $i<256; $i++){
147 $cols[$i] = imagecolorallocate($im, $i, 0, 0);
148 }
149
150 $i=0;
151 for ($y=0; $y<$h; $y++){
152 for ($x=0; $x<$w; $x++){
153
154 $b1 = intval($bytes[$i]);
155
156 $col = $cols[$b1];
157
158 imagesetpixel($im, $x, $y, $col);
159
160 $i++;
161 }
162 }
163
164 save_png($im, "{$mode}_8b_{$shape}");
165 imagedestroy($im);
166 }
167
168 ####################################################################################################
169
170 function create_8b_gray($mode, $shape, $bytes, $w, $h){
171
172 $im = imagecreate($w, $h);
173
174 $cols = array();
175 for ($i=0; $i<256; $i++){
176 $cols[$i] = imagecolorallocate($im, $i, $i, $i);
177 }
178
179 $i=0;
180 for ($y=0; $y<$h; $y++){
181 for ($x=0; $x<$w; $x++){
182
183 $b1 = intval($bytes[$i]);
184
185 $col = $cols[$b1];
186
187 imagesetpixel($im, $x, $y, $col);
188
189 $i++;
190 }
191 }
192
193 save_png($im, "{$mode}_8b_gray_{$shape}");
194 imagedestroy($im);
195 }
196
197 ####################################################################################################
198 function create_24b($mode, $shape, $bytes, $w, $h){
199
200 $im = imagecreatetruecolor($w, $h);
201 imageAlphaBlending($im, false);
202 imageSaveAlpha($im, false);
203
204 $i=0;
205 for ($y=0; $y<$h; $y++){
206 for ($x=0; $x<$w; $x++){
207
208 $b1 = $bytes[($i*3)+0];
209 $b2 = $bytes[($i*3)+1];
210 $b3 = $bytes[($i*3)+2];
211
212 $col = imagecolorallocate($im, $b1, $b2, $b3);
213
214 imagesetpixel($im, $x, $y, $col);
215
216 $i++;
217 }
218 }
219
220 save_png($im, "{$mode}_24b_{$shape}");
221 imagedestroy($im);
222 }
223
224 ####################################################################################################
225
226 function create_32b($mode, $shape, $bytes, $w, $h){
227
228 $im = imagecreatetruecolor($w, $h);
229 imageAlphaBlending($im, false);
230 imageSaveAlpha($im, true);
231
232 $i=0;
233 for ($y=0; $y<$h; $y++){
234 for ($x=0; $x<$w; $x++){
235
236 $b1 = $bytes[($i*4)+0];
237 $b2 = $bytes[($i*4)+1];
238 $b3 = $bytes[($i*4)+2];
239 $b4 = $bytes[($i*4)+3];
240
241 $col = imagecolorallocatealpha($im, $b1, $b2, $b3, $b4);
242
243 #echo "$b1, $b2, $b3, $b4 ..";
244
245 imagesetpixel($im, $x, $y, $col);
246
247 $i++;
248 }
249 }
250
251 save_png($im, "{$mode}_32b_{$shape}");
252 imagedestroy($im);
253 }
254
255 ####################################################################################################
256
257 function save_png($im, $name){
258
259 for ($a=0; $a<2; $a++){
260 for ($b=0; $b<2; $b++){
261 for ($c=0; $c<2; $c++){
262 for ($d=0; $d<2; $d++){
263
264 $filter = 0;
265 $bits = '';
266 if ($a){ $filter |= PNG_FILTER_SUB; $bits .= '_sub'; }
267 if ($b){ $filter |= PNG_FILTER_UP; $bits .= '_up'; }
268 if ($c){ $filter |= PNG_FILTER_AVG; $bits .= '_avg'; }
269 if ($d){ $filter |= PNG_FILTER_PAETH; $bits .= '_paeth'; }
270
271 if ($filter){
272 if (OUTPUT_FILTERED){
273 imagepng($im, $GLOBALS[filter_path]."{$name}{$bits}.png", 9, $filter);
274 }
275 }else{
276 imagepng($im, $GLOBALS[path]."{$name}.png", 9, $filter);
277 }
278 }
279 }
280 }
281 }
282 }
283
284 ?>
将图像读取为JS文件
1 function loadPNGData(strFilename, fncCallback) {
2 // test for canvas and getImageData
3 var bCanvas = false;
4 var oCanvas = document.createElement("canvas");
5 if (oCanvas.getContext) {
6 var oCtx = oCanvas.getContext("2d");
7 if (oCtx.getImageData) {
8 bCanvas = true;
9 }
10 }
11 if (bCanvas) {
12 var oImg = new Image();
13 oImg.style.position = "absolute";
14 oImg.style.left = "-10000px";
15 document.body.appendChild(oImg);
16 oImg.onload = function() {
17 var iWidth = this.offsetWidth;
18 var iHeight = this.offsetHeight;
19 oCanvas.width = iWidth;
20 oCanvas.height = iHeight;
21 oCanvas.style.width = iWidth+"px";
22 oCanvas.style.height = iHeight+"px";
23 var oText = document.getElementById("output");
24 oCtx.drawImage(this,0,0);
25 var oData = oCtx.getImageData(0,0,iWidth,iHeight).data;
26 var a = [];
27 var len = oData.length;
28 var p = -1;
29 for (var i=0;i<len;i+=4) {
30 if (oData[i] > 0)
31 a[++p] = String.fromCharCode(oData[i]);
32 };
33 var strData = a.join("");
34 if (fncCallback) {
35 fncCallback(strData);
36 }
37 document.body.removeChild(oImg);
38 }
39 oImg.src = strFilename;
40 return true;
41 } else {
42 return false;
43 }
44 }
For more detail, please refer to http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
原文链接: https://www.cnblogs.com/yanzhihong23/archive/2012/10/23/2735140.html
欢迎关注
微信关注下方公众号，第一时间获取干货硬货；公众号内回复【pdf】免费获取数百本计算机经典书籍
原创文章受到原创版权保护。转载请注明出处：https://www.ccppcoding.com/archives/66789
非原创文章文中已经注明原地址，如有侵权，联系删除
关注公众号【高性能架构探索】，第一时间获取最新文章
转载文章受原作者版权保护。转载请注明原作者出处！
