-
Notifications
You must be signed in to change notification settings - Fork 1
/
[js]深入浅出Base64编码原理.html
451 lines (439 loc) · 98.4 KB
/
[js]深入浅出Base64编码原理.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>深入浅出base64编码原理 | JyLie</title>
<meta name="generator" content="VuePress 1.5.0">
<link rel="icon" href="/idea-domain/favicon.ico">
<meta name="description" content="Code my dream!">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="preload" href="/idea-domain/assets/css/0.styles.2c36a006.css" as="style"><link rel="preload" href="/idea-domain/assets/js/app.89376c8e.js" as="script"><link rel="preload" href="/idea-domain/assets/js/4.5465c98c.js" as="script"><link rel="preload" href="/idea-domain/assets/js/1.4d4f02de.js" as="script"><link rel="preload" href="/idea-domain/assets/js/54.8df6ccd2.js" as="script"><link rel="prefetch" href="/idea-domain/assets/js/10.a2352b9f.js"><link rel="prefetch" href="/idea-domain/assets/js/11.c25da6a4.js"><link rel="prefetch" href="/idea-domain/assets/js/12.4b9a78a0.js"><link rel="prefetch" href="/idea-domain/assets/js/13.4baadb5a.js"><link rel="prefetch" href="/idea-domain/assets/js/14.185a9a02.js"><link rel="prefetch" href="/idea-domain/assets/js/15.9636a8ca.js"><link rel="prefetch" href="/idea-domain/assets/js/16.679932b8.js"><link rel="prefetch" href="/idea-domain/assets/js/17.dd32ab06.js"><link rel="prefetch" href="/idea-domain/assets/js/18.32b1cf56.js"><link rel="prefetch" href="/idea-domain/assets/js/19.a56920af.js"><link rel="prefetch" href="/idea-domain/assets/js/20.438036b2.js"><link rel="prefetch" href="/idea-domain/assets/js/21.16413d4b.js"><link rel="prefetch" href="/idea-domain/assets/js/22.0e53dc4f.js"><link rel="prefetch" href="/idea-domain/assets/js/23.1fbc2526.js"><link rel="prefetch" href="/idea-domain/assets/js/24.84de9b18.js"><link rel="prefetch" href="/idea-domain/assets/js/25.d8f5fb42.js"><link rel="prefetch" href="/idea-domain/assets/js/26.08b284c3.js"><link rel="prefetch" href="/idea-domain/assets/js/27.fc88097b.js"><link rel="prefetch" href="/idea-domain/assets/js/28.0e86cd67.js"><link rel="prefetch" href="/idea-domain/assets/js/29.14a3a251.js"><link rel="prefetch" href="/idea-domain/assets/js/30.380fd044.js"><link rel="prefetch" href="/idea-domain/assets/js/31.2159b398.js"><link rel="prefetch" href="/idea-domain/assets/js/32.9fd1bac0.js"><link rel="prefetch" href="/idea-domain/assets/js/33.66deed1e.js"><link rel="prefetch" href="/idea-domain/assets/js/34.660bbe89.js"><link rel="prefetch" href="/idea-domain/assets/js/35.d6613fc9.js"><link rel="prefetch" href="/idea-domain/assets/js/36.5debaab7.js"><link rel="prefetch" href="/idea-domain/assets/js/37.baea05f8.js"><link rel="prefetch" href="/idea-domain/assets/js/38.b12b93d9.js"><link rel="prefetch" href="/idea-domain/assets/js/39.881b30e0.js"><link rel="prefetch" href="/idea-domain/assets/js/40.c5906ef8.js"><link rel="prefetch" href="/idea-domain/assets/js/41.314b3f1d.js"><link rel="prefetch" href="/idea-domain/assets/js/42.b3e6177b.js"><link rel="prefetch" href="/idea-domain/assets/js/43.05e57135.js"><link rel="prefetch" href="/idea-domain/assets/js/44.decce320.js"><link rel="prefetch" href="/idea-domain/assets/js/45.92f9fb7a.js"><link rel="prefetch" href="/idea-domain/assets/js/46.d9fd684f.js"><link rel="prefetch" href="/idea-domain/assets/js/47.46b7b146.js"><link rel="prefetch" href="/idea-domain/assets/js/48.4ac11cbd.js"><link rel="prefetch" href="/idea-domain/assets/js/49.73378ba2.js"><link rel="prefetch" href="/idea-domain/assets/js/5.0b75201a.js"><link rel="prefetch" href="/idea-domain/assets/js/50.1a6b9738.js"><link rel="prefetch" href="/idea-domain/assets/js/51.70dbe9ec.js"><link rel="prefetch" href="/idea-domain/assets/js/52.1743641c.js"><link rel="prefetch" href="/idea-domain/assets/js/53.88c57e85.js"><link rel="prefetch" href="/idea-domain/assets/js/55.7958b607.js"><link rel="prefetch" href="/idea-domain/assets/js/56.cfd57e97.js"><link rel="prefetch" href="/idea-domain/assets/js/57.156cd233.js"><link rel="prefetch" href="/idea-domain/assets/js/58.197d2a8c.js"><link rel="prefetch" href="/idea-domain/assets/js/59.d7a72db1.js"><link rel="prefetch" href="/idea-domain/assets/js/6.1d6b63a7.js"><link rel="prefetch" href="/idea-domain/assets/js/60.c62a4d78.js"><link rel="prefetch" href="/idea-domain/assets/js/61.949370dd.js"><link rel="prefetch" href="/idea-domain/assets/js/62.23a941cc.js"><link rel="prefetch" href="/idea-domain/assets/js/63.65d4a7fe.js"><link rel="prefetch" href="/idea-domain/assets/js/64.7ac5ce1f.js"><link rel="prefetch" href="/idea-domain/assets/js/65.06b31195.js"><link rel="prefetch" href="/idea-domain/assets/js/66.0502d679.js"><link rel="prefetch" href="/idea-domain/assets/js/67.8933a0d7.js"><link rel="prefetch" href="/idea-domain/assets/js/68.b5952168.js"><link rel="prefetch" href="/idea-domain/assets/js/69.5e2c7b6f.js"><link rel="prefetch" href="/idea-domain/assets/js/7.915bfa51.js"><link rel="prefetch" href="/idea-domain/assets/js/70.b1e5fa24.js"><link rel="prefetch" href="/idea-domain/assets/js/71.1f97cb34.js"><link rel="prefetch" href="/idea-domain/assets/js/72.de33eb9f.js"><link rel="prefetch" href="/idea-domain/assets/js/73.b6026198.js"><link rel="prefetch" href="/idea-domain/assets/js/74.36040e8e.js"><link rel="prefetch" href="/idea-domain/assets/js/75.b1ee04bd.js"><link rel="prefetch" href="/idea-domain/assets/js/76.674f3bcb.js"><link rel="prefetch" href="/idea-domain/assets/js/77.2e8d78eb.js"><link rel="prefetch" href="/idea-domain/assets/js/78.6be64fef.js"><link rel="prefetch" href="/idea-domain/assets/js/79.9b118866.js"><link rel="prefetch" href="/idea-domain/assets/js/8.189eb478.js"><link rel="prefetch" href="/idea-domain/assets/js/80.85bb9d6a.js"><link rel="prefetch" href="/idea-domain/assets/js/81.0dab5b76.js"><link rel="prefetch" href="/idea-domain/assets/js/82.428c38c7.js"><link rel="prefetch" href="/idea-domain/assets/js/83.d4455b9e.js"><link rel="prefetch" href="/idea-domain/assets/js/84.02a939e7.js"><link rel="prefetch" href="/idea-domain/assets/js/85.ed694f58.js"><link rel="prefetch" href="/idea-domain/assets/js/86.eeda91b2.js"><link rel="prefetch" href="/idea-domain/assets/js/87.afb850a1.js"><link rel="prefetch" href="/idea-domain/assets/js/9.db2c446c.js"><link rel="prefetch" href="/idea-domain/assets/js/vendors~flowchart.567eafbc.js">
<link rel="stylesheet" href="/idea-domain/assets/css/0.styles.2c36a006.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container" data-v-5f3f4765><div data-v-5f3f4765><div id="loader-wrapper" class="loading-wrapper" data-v-164600bd data-v-5f3f4765 data-v-5f3f4765><div class="loader-main" data-v-164600bd><div data-v-164600bd></div><div data-v-164600bd></div><div data-v-164600bd></div><div data-v-164600bd></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-7c5ab02c data-v-5f3f4765 data-v-5f3f4765><h3 class="title" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c>JyLie</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><input type="password" value="" data-v-7c5ab02c> <span data-v-7c5ab02c>Konck! Knock!</span> <button data-v-7c5ab02c>OK</button></label> <div class="footer" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><span data-v-7c5ab02c><i class="iconfont reco-theme" data-v-7c5ab02c></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-7c5ab02c>vuePress-theme-reco</a></span> <span data-v-7c5ab02c><i class="iconfont reco-copyright" data-v-7c5ab02c></i> <a data-v-7c5ab02c><span data-v-7c5ab02c>JyLie</span>
<span data-v-7c5ab02c>2017 - </span>
2023
</a></span></div></div> <div class="hide" data-v-5f3f4765><header class="navbar" data-v-5f3f4765><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/idea-domain/" class="home-link router-link-active"><!----> <span class="site-name">JyLie</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/idea-domain/" class="nav-link"><i class="iconfont reco-home"></i>
主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
分类
</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/idea-domain/categories/API/" class="nav-link"><i class="iconfont undefined"></i>
API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
HTML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
css
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
vue
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Linux/" class="nav-link"><i class="iconfont undefined"></i>
Linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Docker/" class="nav-link"><i class="iconfont undefined"></i>
Docker
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Webpack/" class="nav-link"><i class="iconfont undefined"></i>
Webpack
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebGL/" class="nav-link"><i class="iconfont undefined"></i>
WebGL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/PixiJS/" class="nav-link"><i class="iconfont undefined"></i>
PixiJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
Github
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/BOM/" class="nav-link"><i class="iconfont undefined"></i>
BOM
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/XML/" class="nav-link"><i class="iconfont undefined"></i>
XML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bug/" class="nav-link"><i class="iconfont undefined"></i>
bug
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ie/" class="nav-link"><i class="iconfont undefined"></i>
ie
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/uniapp/" class="nav-link"><i class="iconfont undefined"></i>
uniapp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IE/" class="nav-link"><i class="iconfont undefined"></i>
IE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/mysql/" class="nav-link"><i class="iconfont undefined"></i>
mysql
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/font/" class="nav-link"><i class="iconfont undefined"></i>
font
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bom/" class="nav-link"><i class="iconfont undefined"></i>
bom
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/canvas/" class="nav-link"><i class="iconfont undefined"></i>
canvas
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/video/" class="nav-link"><i class="iconfont undefined"></i>
video
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/html/" class="nav-link"><i class="iconfont undefined"></i>
html
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/js/" class="nav-link"><i class="iconfont undefined"></i>
js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/运算符/" class="nav-link"><i class="iconfont undefined"></i>
运算符
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/RegExp/" class="nav-link"><i class="iconfont undefined"></i>
RegExp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/编码/" class="nav-link"><i class="iconfont undefined"></i>
编码
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/MiniApp/" class="nav-link"><i class="iconfont undefined"></i>
MiniApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nginx/" class="nav-link"><i class="iconfont undefined"></i>
nginx
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Tool/" class="nav-link"><i class="iconfont undefined"></i>
Tool
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/node.js/" class="nav-link"><i class="iconfont undefined"></i>
node.js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/cat/" class="nav-link"><i class="iconfont undefined"></i>
cat
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nodejs/" class="nav-link"><i class="iconfont undefined"></i>
nodejs
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/protocol/" class="nav-link"><i class="iconfont undefined"></i>
protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/URL/" class="nav-link"><i class="iconfont undefined"></i>
URL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/FLOW/" class="nav-link"><i class="iconfont undefined"></i>
FLOW
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/DNS/" class="nav-link"><i class="iconfont undefined"></i>
DNS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Protocol/" class="nav-link"><i class="iconfont undefined"></i>
Protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/python/" class="nav-link"><i class="iconfont undefined"></i>
python
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/安全/" class="nav-link"><i class="iconfont undefined"></i>
安全
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/linux/" class="nav-link"><i class="iconfont undefined"></i>
linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/shell/" class="nav-link"><i class="iconfont undefined"></i>
shell
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IDE/" class="nav-link"><i class="iconfont undefined"></i>
IDE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Packer/" class="nav-link"><i class="iconfont undefined"></i>
Packer
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ViteJS/" class="nav-link"><i class="iconfont undefined"></i>
ViteJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/git/" class="nav-link"><i class="iconfont undefined"></i>
git
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vendor/" class="nav-link"><i class="iconfont undefined"></i>
vendor
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebApp/" class="nav-link"><i class="iconfont undefined"></i>
WebApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebView/" class="nav-link"><i class="iconfont undefined"></i>
WebView
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Window API/" class="nav-link"><i class="iconfont undefined"></i>
Window API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/webview/" class="nav-link"><i class="iconfont undefined"></i>
webview
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/规范/" class="nav-link"><i class="iconfont undefined"></i>
规范
</a></li></ul></div></div><div class="nav-item"><a href="/idea-domain/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
标签
</a></div><div class="nav-item"><a href="/idea-domain/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
时光轴
</a></div><div class="nav-item"><a href="https://github.com/liejiayong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-5f3f4765></div> <aside class="sidebar" data-v-5f3f4765><div class="personal-info-wrapper" data-v-a30e08ee><img src="/idea-domain/avatar.jpg" alt="author-avatar" class="personal-img" data-v-a30e08ee> <h3 class="name" data-v-a30e08ee>
JyLie
</h3> <div class="num" data-v-a30e08ee><div data-v-a30e08ee><h3 data-v-a30e08ee>74</h3> <h6 data-v-a30e08ee>Article</h6></div> <div data-v-a30e08ee><h3 data-v-a30e08ee>79</h3> <h6 data-v-a30e08ee>Tag</h6></div></div> <hr data-v-a30e08ee></div> <nav class="nav-links"><div class="nav-item"><a href="/idea-domain/" class="nav-link"><i class="iconfont reco-home"></i>
主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
分类
</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/idea-domain/categories/API/" class="nav-link"><i class="iconfont undefined"></i>
API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
HTML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
css
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
vue
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Linux/" class="nav-link"><i class="iconfont undefined"></i>
Linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Docker/" class="nav-link"><i class="iconfont undefined"></i>
Docker
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Webpack/" class="nav-link"><i class="iconfont undefined"></i>
Webpack
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebGL/" class="nav-link"><i class="iconfont undefined"></i>
WebGL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/PixiJS/" class="nav-link"><i class="iconfont undefined"></i>
PixiJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
Github
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/BOM/" class="nav-link"><i class="iconfont undefined"></i>
BOM
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/XML/" class="nav-link"><i class="iconfont undefined"></i>
XML
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bug/" class="nav-link"><i class="iconfont undefined"></i>
bug
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ie/" class="nav-link"><i class="iconfont undefined"></i>
ie
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/uniapp/" class="nav-link"><i class="iconfont undefined"></i>
uniapp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IE/" class="nav-link"><i class="iconfont undefined"></i>
IE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/mysql/" class="nav-link"><i class="iconfont undefined"></i>
mysql
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/font/" class="nav-link"><i class="iconfont undefined"></i>
font
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/bom/" class="nav-link"><i class="iconfont undefined"></i>
bom
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/canvas/" class="nav-link"><i class="iconfont undefined"></i>
canvas
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/video/" class="nav-link"><i class="iconfont undefined"></i>
video
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/html/" class="nav-link"><i class="iconfont undefined"></i>
html
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/js/" class="nav-link"><i class="iconfont undefined"></i>
js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/运算符/" class="nav-link"><i class="iconfont undefined"></i>
运算符
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/RegExp/" class="nav-link"><i class="iconfont undefined"></i>
RegExp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/编码/" class="nav-link"><i class="iconfont undefined"></i>
编码
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/MiniApp/" class="nav-link"><i class="iconfont undefined"></i>
MiniApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nginx/" class="nav-link"><i class="iconfont undefined"></i>
nginx
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Tool/" class="nav-link"><i class="iconfont undefined"></i>
Tool
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/node.js/" class="nav-link"><i class="iconfont undefined"></i>
node.js
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/cat/" class="nav-link"><i class="iconfont undefined"></i>
cat
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/nodejs/" class="nav-link"><i class="iconfont undefined"></i>
nodejs
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/protocol/" class="nav-link"><i class="iconfont undefined"></i>
protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/URL/" class="nav-link"><i class="iconfont undefined"></i>
URL
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/FLOW/" class="nav-link"><i class="iconfont undefined"></i>
FLOW
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/DNS/" class="nav-link"><i class="iconfont undefined"></i>
DNS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Protocol/" class="nav-link"><i class="iconfont undefined"></i>
Protocol
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/python/" class="nav-link"><i class="iconfont undefined"></i>
python
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/安全/" class="nav-link"><i class="iconfont undefined"></i>
安全
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/linux/" class="nav-link"><i class="iconfont undefined"></i>
linux
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/shell/" class="nav-link"><i class="iconfont undefined"></i>
shell
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/IDE/" class="nav-link"><i class="iconfont undefined"></i>
IDE
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Packer/" class="nav-link"><i class="iconfont undefined"></i>
Packer
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/ViteJS/" class="nav-link"><i class="iconfont undefined"></i>
ViteJS
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/git/" class="nav-link"><i class="iconfont undefined"></i>
git
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/vendor/" class="nav-link"><i class="iconfont undefined"></i>
vendor
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebApp/" class="nav-link"><i class="iconfont undefined"></i>
WebApp
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/WebView/" class="nav-link"><i class="iconfont undefined"></i>
WebView
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/Window API/" class="nav-link"><i class="iconfont undefined"></i>
Window API
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/webview/" class="nav-link"><i class="iconfont undefined"></i>
webview
</a></li><li class="dropdown-item"><!----> <a href="/idea-domain/categories/规范/" class="nav-link"><i class="iconfont undefined"></i>
规范
</a></li></ul></div></div><div class="nav-item"><a href="/idea-domain/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
标签
</a></div><div class="nav-item"><a href="/idea-domain/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
时光轴
</a></div><div class="nav-item"><a href="https://github.com/liejiayong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>深入浅出base64编码原理</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-由来" class="sidebar-link">base64 由来</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-的编码原理" class="sidebar-link">base64 的编码原理</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-编码对照表" class="sidebar-link">base64 编码对照表</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-的编码转换规则" class="sidebar-link">base64 的编码转换规则</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-优缺点" class="sidebar-link">base64 优缺点</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#javascript-的-base64-转码方法" class="sidebar-link">JavaScript 的 base64 转码方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#web-api-二进制与-base64-转换" class="sidebar-link">Web API 二进制与 base64 转换</a></li><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-转二进制" class="sidebar-link">base64 转二进制</a></li><li class="sidebar-sub-header"><a href="/idea-domain/post/%5Bjs%5D%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BABase64%E7%BC%96%E7%A0%81%E5%8E%9F%E7%90%86.html#base64-转成-blob" class="sidebar-link">base64 转成 Blob</a></li></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-7c5ab02c data-v-5f3f4765><h3 class="title" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c>深入浅出base64编码原理</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><input type="password" value="" data-v-7c5ab02c> <span data-v-7c5ab02c>Konck! Knock!</span> <button data-v-7c5ab02c>OK</button></label> <div class="footer" style="display:none;" data-v-7c5ab02c data-v-7c5ab02c><span data-v-7c5ab02c><i class="iconfont reco-theme" data-v-7c5ab02c></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-7c5ab02c>vuePress-theme-reco</a></span> <span data-v-7c5ab02c><i class="iconfont reco-copyright" data-v-7c5ab02c></i> <a data-v-7c5ab02c><span data-v-7c5ab02c>JyLie</span>
<span data-v-7c5ab02c>2017 - </span>
2023
</a></span></div></div> <div data-v-5f3f4765><main class="page"><div class="page-title" style="display:none;"><h1>深入浅出base64编码原理</h1> <hr> <div data-v-2c863f0e><i class="iconfont reco-account" data-v-2c863f0e><span data-v-2c863f0e>JyLie</span></i> <i class="iconfont reco-date" data-v-2c863f0e><span data-v-2c863f0e>2020-02-16</span></i> <!----> <i class="iconfont reco-tag tags" data-v-2c863f0e><span class="tag-item" data-v-2c863f0e>base64</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><h1 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h1> <p>平静之下，蓦然回首，base64 却在灯火阑珊处。</p> <p>今天翻开旧项目发现挺多图片相关的插件都是用 base64 来显示图片的。谈到 base64，脑海遐想翩翩，思绪回荡之下 base64 瑕瑜互见。本文旨在记录工作中遇见的问题并加以总结，如有不妥请指正~</p> <h2 id="base64-由来"><a href="#base64-由来" class="header-anchor">#</a> base64 由来</h2> <p>base64 是网络传输 8Bit 字节代码的编码方式之一，是一种基于 64 个可打印字符来表示二进制数据的方法。在做支付系统时，报文交互都需要使用 base64 对明文进行转码，然后再进行签名或加密，之后再进行（或再次 base64 转码）传输。那么，base64 到底起到什么作用呢？</p> <p>在参数传输的过程中经常遇到的一种情况：使用全英文的字符串没问题，但一旦涉及到中文就会出现乱码的情况。与此类似，网络上传输的字符并不全是可打印的字符，比如二进制文件、图片等。base64 的出现就是为了解决此问题，它是基于 64 个可打印的字符来表示二进制的数据的一种方法。</p> <p>电子邮件刚问世的时候，只能传输英文，但后来随着用户的增加，中文、日韩俄文等文字的用户也有需求，但这些字符并不能被服务器或网关有效处理，因此 base64 就登场了。随后，base64 在 URL、Cookie、网页传输少量二进制文件中也有相应的使用。</p> <h2 id="base64-的编码原理"><a href="#base64-的编码原理" class="header-anchor">#</a> base64 的编码原理</h2> <p>基于<code>a-z</code>、<code>A-Z</code>、<code>0-9</code>、<code>+/</code>这 64 个字符来标识二进制数据，另外<code>=</code>符号用于当字节缺位时补用。</p> <h2 id="base64-编码对照表"><a href="#base64-编码对照表" class="header-anchor">#</a> base64 编码对照表</h2> <table log-set-param="table_view" class="table-view log-set-param"><thead>base64 编码对照表</thead> <tbody><tr><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>索引</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>对应字符</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>索引</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>对应字符</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>索引</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>对应字符</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>索引</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>对应字符</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">0</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>A</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">17</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>R</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">34</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>i</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">51</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>z</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">1</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>B</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">18</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>S</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">35</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>j</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">52</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>0</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">2</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>C</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">19</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>T</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">36</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>k</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">53</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>1</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">3</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>D</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">20</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>U</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">37</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>l</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">54</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>2</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">4</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>E</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">21</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>V</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">38</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>m</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">55</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>3</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">5</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>F</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">22</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>W</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">39</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>n</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">56</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>4</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">6</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>G</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">23</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>X</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">40</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>o</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">57</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>5</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">7</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>H</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">24</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>Y</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">41</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>p</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">58</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>6</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">8</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>I</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">25</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>Z</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">42</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>q</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">59</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>7</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">9</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>J</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">26</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>a</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">43</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>r</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">60</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>8</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">10</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>K</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">27</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>b</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">44</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>s</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">61</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>9</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">11</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>L</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">28</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>c</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">45</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>t</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">62</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>+</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">12</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>M</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">29</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>d</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">46</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>u</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">63</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>/</b></div></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">13</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>N</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">30</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>e</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">47</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>v</b></div></td><td></td><td></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">14</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>O</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">31</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>f</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">48</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>w</b></div></td><td></td><td></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">15</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>P</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">32</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>g</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">49</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>x</b></div></td><td></td><td></td></tr><tr><td width="66" align="left" valign="center"><div label-module="para" class="para">16</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>Q</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">33</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>h</b></div></td><td width="66" align="left" valign="center"><div label-module="para" class="para">50</div></td><td width="66" align="left" valign="center"><div label-module="para" class="para"><b>y</b></div></td><td></td><td></td></tr></tbody></table> <h2 id="base64-的编码转换规则"><a href="#base64-的编码转换规则" class="header-anchor">#</a> base64 的编码转换规则</h2> <p>base64 要求把<code>每三个 8Bit</code> 的字节<code>转换</code>为<code>四个 6Bit</code> 的字节（<code>3*8 = 4*6 = 24</code>），然后把 6Bit<code>再添两位高位 0</code>，组成四个 8Bit 的字节（<code>4*8=32</code>）。</p> <p>为什么使用 3 个字节一组呢？因为 6 和 8 的<code>最小公倍数</code>为 24，三个字节正好 24 个二进制位，每 6 个 bit 位一组，恰好能够分为 4 组。</p> <p>同时用于分组后每组添加两个高位 0，<code>转换后</code>的字符串<code>理论上</code>将要比原来的字符<code>长 1/3（24/32=1/3）</code>。</p> <ul><li><p>步骤分解：</p> <ol><li>将待转换的字符串每三个字符分为一组，每个字符字节占 8bit，那么共有 24 个二进制位。</li> <li>将 24 个二进制位每 6 个字节为一组，共分为 4 组。</li> <li>在每组 6 字节前面添加两个 0，每组由 6 字节变为 8 字节二进制位，组成总共 32 个二进制位，即四个字节。</li> <li>根据 base64 编码对照表获得对应的值。</li></ol></li> <li><p>举个栗子</p> <ul><li>以标准 3 个字符<code>LJY</code>为例。</li></ul> <ol><li><code>LJY</code> 对应的 ASCII 码值分别为 76、74、89，对应的二进制值是 01001100、01001010、01011001。由此组成一个 24 位的二进制位字符串。</li> <li>将 24 位的二进制位字符串，按照每 6 位二进制位一组分成 4 组。</li> <li>对 4 组 每组 6 位二进制位字符串前面补两个 0，每组扩展为 8 位二进制位，4 组共扩展成 32 个二进制位，此时 4 组二进制位分别为：00010011、00000100、00101001、00011001。其对应的 base64 编码索引为：19、4、41、25。</li> <li>用 base64 编码索引值在 base64 编码表中进行查找，分别对应：T、E、p、Z。</li></ol> <ul><li>因此<code>LJY</code>base64 编码之后就变为：TEpZ。</li></ul></li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>| 文本 | L | J | Y |
| ASCII | 76 | 74 | 89 |
| 二进制位 | 01001100 | 01001010 | 01011001 |
| 分组二进制 | 010011 | 000100 | 101001 | 011001 |
| 分组二进制补2个0 | 00010011 | 00000100 | 00101001 | 00011001 |
| 分组索引 | 19 | 4 | 41 | 25 |
| base64编码 | T | E | p | Z |
主要展示：
转换前二进制位: 01001100 01001010 01011001
转换后二进制位: 00010011 00000100 00101001 00011001
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div> <ul><li>字符位数不足情况</li></ul> <p>上述栗子是面向刚好三个字符为一组的情况。当然不是所有时候都这么巧字符位数足够，除此以外有位数不足的情况。那么，面对字符位数不足的情况下该如何处理呢？</p> <p>base64 给出的方案是，当每组字符不足三位时，不足位数位置需要使用<code>=</code>符号补上。</p> <p>位数不足情况处理情景：</p> <ul><li>位数缺一个字节：一个字节共 8 个二进制位，依旧按照规则进行分组。此时共 8 个二进制位，每 6 个一组，则第二组缺少 4 位，用 0 补齐，得到两个 base64 编码，而后面两组没有对应数据，都用<code>=</code>补上。</li> <li>位数缺两个字节：两个字节共 16 个二进制位，依旧按照规则进行分组。此时总共 16 个二进制位，每 6 个一组，则第三组缺少 2 位，用 0 补齐，得到三个 base64 编码，第四组完全没有数据则用<code>=</code>补上。</li></ul> <p>位数不足图解如下：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code><!-- 缺2位字符,字符串以A为例转换base64后位QQ== -->
| 文本（1Byte） | A | | |
| 二进制位 | 01000001 | | |
| 分组二进制 | 010000 | 010000 | | |
| 分组二进制补0 | 00010000 | 00010000 | | |
| 分组索引 | 16 | 16 | | |
| base64编码 | Q | Q | = | = |
<!-- 缺1位字符,字符串以AB为例转换base64后位QUI= -->
| 文本（1Byte） | A | B | |
| 二进制位 | 01000001 | 01000010 | |
| 分组二进制 | 010000 | 010100 | 001000 | |
| 分组二进制补0 | 00010000 | 00010100 | 00001000 | |
| 分组索引 | 16 | 20 | 8 | |
| base64编码 | Q | U | I | = |
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>列举了一个字符到三个字符转换为 base64 ，可以发现将 base64 就是按照 base64 编码对照表来将二进制转换为字符串，使得数据不能直接明文展示出来，但也算不上是加密，而这巧好可用在传输、存储、表示二进制领域的情景。</p> <ul><li>另外值得注意的是，不用语言如中文有多种编码（比如：utf-8、gb2312、gbk 等），不同编码对应 base64 编码结果都不一样。</li> <li>其次在推演过程中可发现 base64 即用 6 位字节（2 的 6 次幂就是 64）表示字符同理，Base32 就是用 5 位字节，Base16 就是用 4 位字节。大家可以按照上面的步骤进行演化测试。</li></ul> <h2 id="base64-优缺点"><a href="#base64-优缺点" class="header-anchor">#</a> base64 优缺点</h2> <p>知道 base64 是什么后，也该到为什么出现了。为什么要是使用 base64 呢，这要从其优缺点入手来选择适合场景了。</p> <ul><li>优势：
<ul><li>base64 适合不同平台、不同语言的传输；</li> <li>页面中内嵌使用 base64 格式的小图片，可减少了服务器访问次数；</li> <li>二进制位转换 base64 算法简单，对性能影响不大；</li></ul></li> <li>缺点
<ul><li>二进制文件转换为 base64 后，体积大概增加 1/3；
<ul><li>在基于 Android6.0 及以下默认浏览器实测场景中发现，某些机型如中兴上传 base64 图片会因为字符大小过大导致上传奔溃的情况。</li> <li>字符长度过大的 base64 不适应使用在 URL 情景，因为 IOS 端浏览器会限制 URL 长度，当长度超过时会自动切除多余部分，导致数据丢失。</li> <li>base64 字符过大会导致页面加载速度变慢，因此建议 10kb 以下的图片使用。</li></ul></li> <li>base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css；</li> <li>面对大文件时，会消耗一定的 CPU 进行编解码</li></ul></li></ul> <h2 id="javascript-的-base64-转码方法"><a href="#javascript-的-base64-转码方法" class="header-anchor">#</a> JavaScript 的 base64 转码方法</h2> <h3 id="web-api-二进制与-base64-转换"><a href="#web-api-二进制与-base64-转换" class="header-anchor">#</a> Web API 二进制与 base64 转换</h3> <ul><li>atob(encodedData) : 解码一个 base64 编码的字符串。</li></ul> <p>enCodedData，是一个通过 btoa() 方法编码的字符串， 为二进制字符串包含 base64 编码的数据。并返回包含来自 encodedData 的解码数据的 ASCII 字符串。</p> <ul><li>btoa(stringToEncode) : 创建一个 bas64 编码的字符串。</li></ul> <p>stringToEncode 为要编码的二进制字符串。并返回包含 stringToEncode 的 base64 表示形式的 ASCII 字符串。</p> <p>另外在 JavaScript 中，字符串使用 UTF-16 字符编码表示：在这种编码中，字符串表示为 16 位（2 字节）单元的序列。每个 ASCII 字符都可以放入其中一个单元的第一个字节，但许多其他字符不能。</p> <p>base64 在设计上需要二进制数据作为其输入。就 JavaScript 字符串而言，这意味着每个字符只占用一个字节的字符串。因此，如果将一个字符串传递到 btoa（）中，其中包含占用多个字节的字符，则会出现错误，因为这不被视为二进制数据，因此超 16 位字符在使用 btoa()时需要先对字符转码为二进制位。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 简单数据</span>
<span class="token keyword">const</span> encodedData <span class="token operator">=</span> <span class="token function">btoa</span><span class="token punctuation">(</span><span class="token string">'Hello, world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// encode a string</span>
<span class="token keyword">const</span> decodedData <span class="token operator">=</span> <span class="token function">atob</span><span class="token punctuation">(</span>encodedData<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// decode the string</span>
<span class="token comment">/* 复杂数据 */</span>
<span class="token comment">// convert a Unicode string to a string in which</span>
<span class="token comment">// each 16-bit unit occupies only one byte</span>
<span class="token keyword">function</span> <span class="token function">toBinary</span><span class="token punctuation">(</span><span class="token parameter">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> codeUnits <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint16Array</span><span class="token punctuation">(</span>string<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> codeUnits<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
codeUnits<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> string<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> charCodes <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>codeUnits<span class="token punctuation">.</span>buffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> charCodes<span class="token punctuation">.</span>byteLength<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
result <span class="token operator">+=</span> String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span>charCodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">fromBinary</span><span class="token punctuation">(</span><span class="token parameter">binary</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> bytes <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>binary<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> bytes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
bytes<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> binary<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> charCodes <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint16Array</span><span class="token punctuation">(</span>bytes<span class="token punctuation">.</span>buffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> charCodes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
result <span class="token operator">+=</span> String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span>charCodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// a string that contains characters occupying > 1 byte</span>
<span class="token keyword">const</span> myString <span class="token operator">=</span> <span class="token string">'☸☹☺☻☼☾☿'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> converted <span class="token operator">=</span> <span class="token function">toBinary</span><span class="token punctuation">(</span>myString<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> encoded <span class="token operator">=</span> <span class="token function">btoa</span><span class="token punctuation">(</span>converted<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>encoded<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// OCY5JjomOyY8Jj4mPyY=</span>
<span class="token keyword">const</span> decoded <span class="token operator">=</span> <span class="token function">atob</span><span class="token punctuation">(</span>encoded<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> original <span class="token operator">=</span> <span class="token function">fromBinary</span><span class="token punctuation">(</span>decoded<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>original<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ☸☹☺☻☼☾☿</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><ul><li>兼容性：atob() 方法不支持 IE9 及更早的 IE 版本。</li></ul> <h3 id="base64-转二进制"><a href="#base64-转二进制" class="header-anchor">#</a> base64 转二进制</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// base64编码表</span>
<span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token number">0</span><span class="token operator">:</span> <span class="token number">52</span><span class="token punctuation">,</span>
<span class="token number">1</span><span class="token operator">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
<span class="token number">2</span><span class="token operator">:</span> <span class="token number">54</span><span class="token punctuation">,</span>
<span class="token number">3</span><span class="token operator">:</span> <span class="token number">55</span><span class="token punctuation">,</span>
<span class="token number">4</span><span class="token operator">:</span> <span class="token number">56</span><span class="token punctuation">,</span>
<span class="token number">5</span><span class="token operator">:</span> <span class="token number">57</span><span class="token punctuation">,</span>
<span class="token number">6</span><span class="token operator">:</span> <span class="token number">58</span><span class="token punctuation">,</span>
<span class="token number">7</span><span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>
<span class="token number">8</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
<span class="token number">9</span><span class="token operator">:</span> <span class="token number">61</span><span class="token punctuation">,</span>
<span class="token constant">A</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token constant">B</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token constant">C</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token constant">D</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token constant">E</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token constant">F</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token constant">G</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
<span class="token constant">H</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>
<span class="token constant">I</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token constant">J</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span>
<span class="token constant">K</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token constant">L</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span>
<span class="token constant">M</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
<span class="token constant">N</span><span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
<span class="token constant">O</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
<span class="token constant">P</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
<span class="token constant">Q</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
<span class="token constant">R</span><span class="token operator">:</span> <span class="token number">17</span><span class="token punctuation">,</span>
<span class="token constant">S</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
<span class="token constant">T</span><span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span>
<span class="token constant">U</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token constant">V</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span>
<span class="token constant">W</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span>
<span class="token constant">X</span><span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span>
<span class="token constant">Y</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
<span class="token constant">Z</span><span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
<span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
<span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">27</span><span class="token punctuation">,</span>
<span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
<span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">29</span><span class="token punctuation">,</span>
<span class="token literal-property property">e</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
<span class="token literal-property property">f</span><span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
<span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
<span class="token literal-property property">h</span><span class="token operator">:</span> <span class="token number">33</span><span class="token punctuation">,</span>
<span class="token literal-property property">i</span><span class="token operator">:</span> <span class="token number">34</span><span class="token punctuation">,</span>
<span class="token literal-property property">j</span><span class="token operator">:</span> <span class="token number">35</span><span class="token punctuation">,</span>
<span class="token literal-property property">k</span><span class="token operator">:</span> <span class="token number">36</span><span class="token punctuation">,</span>
<span class="token literal-property property">l</span><span class="token operator">:</span> <span class="token number">37</span><span class="token punctuation">,</span>
<span class="token literal-property property">m</span><span class="token operator">:</span> <span class="token number">38</span><span class="token punctuation">,</span>
<span class="token literal-property property">n</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
<span class="token literal-property property">o</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
<span class="token literal-property property">p</span><span class="token operator">:</span> <span class="token number">41</span><span class="token punctuation">,</span>
<span class="token literal-property property">q</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
<span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">43</span><span class="token punctuation">,</span>
<span class="token literal-property property">s</span><span class="token operator">:</span> <span class="token number">44</span><span class="token punctuation">,</span>
<span class="token literal-property property">t</span><span class="token operator">:</span> <span class="token number">45</span><span class="token punctuation">,</span>
<span class="token literal-property property">u</span><span class="token operator">:</span> <span class="token number">46</span><span class="token punctuation">,</span>
<span class="token literal-property property">v</span><span class="token operator">:</span> <span class="token number">47</span><span class="token punctuation">,</span>
<span class="token literal-property property">w</span><span class="token operator">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">49</span><span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
<span class="token literal-property property">z</span><span class="token operator">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
<span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token number">62</span><span class="token punctuation">,</span>
<span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token number">63</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">base64to2</span><span class="token punctuation">(</span><span class="token parameter">base64</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> len <span class="token operator">=</span> base64<span class="token punctuation">.</span>length <span class="token operator">*</span> <span class="token number">0.75</span><span class="token punctuation">;</span> <span class="token comment">// 转换为int8array所需长度</span>
base64 <span class="token operator">=</span> base64<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">=*$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 去掉=号（占位的）</span>
<span class="token keyword">const</span> int8 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Int8Array</span><span class="token punctuation">(</span>len<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置int8array视图</span>
<span class="token keyword">let</span> arr1<span class="token punctuation">,</span>
arr2<span class="token punctuation">,</span>
arr3<span class="token punctuation">,</span>
arr4<span class="token punctuation">,</span>
p <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> base64<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
arr1 <span class="token operator">=</span> map<span class="token punctuation">[</span>base64<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 每次循环 都将base644个字节转换为3个int8array直接</span>
arr2 <span class="token operator">=</span> map<span class="token punctuation">[</span>base64<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr3 <span class="token operator">=</span> map<span class="token punctuation">[</span>base64<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr4 <span class="token operator">=</span> map<span class="token punctuation">[</span>base64<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 假设数据arr 数据 00101011 00101111 00110011 00110001</span>
int8<span class="token punctuation">[</span>p<span class="token operator">++</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr1 <span class="token operator"><<</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token punctuation">(</span>arr2 <span class="token operator">>></span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 上面的操作 arr1向左边移动2位 变为10101100</span>
<span class="token comment">// arr2 向右移动4位：00000010</span>
<span class="token comment">// | 为'与'操作: 10101110</span>
int8<span class="token punctuation">[</span>p<span class="token operator">++</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr2 <span class="token operator"><<</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token punctuation">(</span>arr3 <span class="token operator">>></span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
int8<span class="token punctuation">[</span>p<span class="token operator">++</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr3 <span class="token operator"><<</span> <span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">|</span> arr4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> int8<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br></div></div><h3 id="base64-转成-blob"><a href="#base64-转成-blob" class="header-anchor">#</a> base64 转成 Blob</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// base64图片转blob</span>
<span class="token keyword">function</span> <span class="token function">base64toBlob</span><span class="token punctuation">(</span><span class="token parameter">base64</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> base64<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
mime <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">:(.*?);</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">'image/png'</span><span class="token punctuation">,</span>
bstr <span class="token operator">=</span> <span class="token function">atob</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 将base64转为Unicode规则编码</span>
n <span class="token operator">=</span> bstr<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
u8arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">while</span> <span class="token punctuation">(</span>n<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
u8arr<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">=</span> bstr<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换编码后才可以使用charCodeAt 找到Unicode编码</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>u8arr<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> mime <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 优化版 */</span>
<span class="token keyword">function</span> <span class="token function">base64ToBlob</span><span class="token punctuation">(</span><span class="token parameter">base64</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> base64<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> mime <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">:(.*?);</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">'image/png'</span><span class="token punctuation">;</span>
<span class="token comment">// 去掉url的头，并转化为byte</span>
<span class="token keyword">var</span> bytes <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">atob</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 处理异常,将ascii码小于0的转换为大于0</span>
<span class="token keyword">var</span> ab <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayBuffer</span><span class="token punctuation">(</span>bytes<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 生成视图（直接针对内存）：8位无符号整数，长度1个字节</span>
<span class="token keyword">var</span> u8arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>ab<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> bytes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
u8arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> bytes<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>u8arr<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> mime <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/btoa" target="_blank" rel="noopener noreferrer">MDN-btoa<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/atob" target="_blank" rel="noopener noreferrer">MDN-atob<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://www.base64decode.org/" target="_blank" rel="noopener noreferrer">base64 官网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="">原文参考</a></li></ul></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a936bdb4 data-v-a936bdb4><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a936bdb4><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a936bdb4></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a936bdb4></path></svg></div><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:65px;bottom:0px;width:130px;height:290px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="130" height="290" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:130px;height:290px;"></canvas></div></div></div>
<script src="/idea-domain/assets/js/app.89376c8e.js" defer></script><script src="/idea-domain/assets/js/4.5465c98c.js" defer></script><script src="/idea-domain/assets/js/1.4d4f02de.js" defer></script><script src="/idea-domain/assets/js/54.8df6ccd2.js" defer></script>
</body>
</html>