前端实现base64解码编码

本文描述了三种前端实现base64解码和编码的方法
Base64 在线编码解码工具 https://base64.us/

方法一：btoa 和 atob

btoa 和 atob 是window对象上的两个函数，window.atob()解码，window.btoa()编码

let encodeText = 'xiaxiayaoguai'
let decodeText = 'eGlheGlheWFvZ3VhaQ=='
console.log(atob(decodeText)) // xiaxiayaoguai
console.log(btoa(encodeText)) // eGlheGlheWFvZ3VhaQ==

Unicode字符编码报错

这里我们将encodeText = '霞霞要乖'再进行解码就会出现以下报错，因为btoa不支持Unicode字符编码

Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.

报错解决办法：

编码时，先用encodeURIComponent对字符串进行编，再用btoa进行Base64编码；
解码时，先用atob对Base64编码的串进行解码，再用decodeURIComponent对字符串进行解码

let encodeText = '霞霞要乖'
let decodeText = 'JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2'
console.log(btoa(encodeURIComponent(encodeText))) // JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2
console.log(decodeURIComponent(atob(decodeText))) // 霞霞要乖

方法二：下包

下包
```
npm install --save js-base64
```

使用

<script>import {Base64} from 'js-base64' // 引入export default {data() {return {encodeText:'霞霞要乖',decodeText:'6Zye6Zye6KaB5LmW',}},created(){this.transformBase64()},methods: {transformBase64(){console.log('编码：', Base64.encode(this.encodeText)) // 6Zye6Zye6KaB5LmWconsole.log('解码：', Base64.decode(this.decodeText)) // 霞霞要乖}}}
</script>

方法三：js实现

构建函数

let Base64 = {keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode: function(e) {let t = "";let n, r, i, s, o, u, a;let f = 0;e = Base64._utf8_encode(e);while (f < e.length) {n = e.charCodeAt(f++);r = e.charCodeAt(f++);i = e.charCodeAt(f++);s = n >> 2;o = (n & 3) << 4 | r >> 4;u = (r & 15) << 2 | i >> 6;a = i & 63;if (isNaN(r)) {u = a = 64} else if (isNaN(i)) {a = 64}t = t + this.keyStr.charAt(s) + this.keyStr.charAt(o) + this.keyStr.charAt(u) + this.keyStr.charAt(a)}return t},decode: function(e) {let t = "";let n, r, i;let s, o, u, a;let f = 0;e = e.replace(/[^A-Za-z0-9+/=]/g, "");while (f < e.length) {s = this.keyStr.indexOf(e.charAt(f++));o = this.keyStr.indexOf(e.charAt(f++));u = this.keyStr.indexOf(e.charAt(f++));a = this.keyStr.indexOf(e.charAt(f++));n = s << 2 | o >> 4;r = (o & 15) << 4 | u >> 2;i = (u & 3) << 6 | a;t = t + String.fromCharCode(n);if (u != 64) {t = t + String.fromCharCode(r)}if (a != 64) {t = t + String.fromCharCode(i)}}t = Base64._utf8_decode(t);return t},_utf8_encode: function(e) {e = e.replace(/rn/g, "n");let t = "";for (let n = 0; n < e.length; n++) {let r = e.charCodeAt(n);if (r < 128) {t += String.fromCharCode(r)} else if (r > 127 && r < 2048) {t += String.fromCharCode(r >> 6 | 192);t += String.fromCharCode(r & 63 | 128)} else {t += String.fromCharCode(r >> 12 | 224);t += String.fromCharCode(r >> 6 & 63 | 128);t += String.fromCharCode(r & 63 | 128)}}return t},_utf8_decode: function(e) {let t = "";let n = 0;let r = c1 = c2 = 0;while (n < e.length) {r = e.charCodeAt(n);if (r < 128) {t += String.fromCharCode(r);n++} else if (r > 191 && r < 224) {c2 = e.charCodeAt(n + 1);t += String.fromCharCode((r & 31) << 6 | c2 & 63);n += 2} else {c2 = e.charCodeAt(n + 1);c3 = e.charCodeAt(n + 2);t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);n += 3}}return t}}

使用

let encodeText = '霞霞要乖'
let decodeText = '6Zye6Zye6KaB5LmW'
console.log(Base64.encode(encodeText)) // 6Zye6Zye6KaB5LmW
console.log(Base64.decode(decodeText)) // 霞霞要乖

前端实现base64解码编码相关推荐

前端DES加密、base64编码，后端DES解密、base64解码
项目场景: 在系统开发的过程中有的时候,我们为了数据的安全性会把前端的数据进行加密,然后再在后端程序中对加密数据进行解密或解密,今天我们就在这里说2种简单的方法(DES加密.base64编码) 具体实 ...
Java中使用Base64进行编码解码的工具类-将验证码图片使用Base64编码并返回给前端
场景前端使用Vue,验证码图片的src属性来自于后台SpringBoot接口. 后台验证码接口生成验证码图片并将其使用Base64进行编码. 前端就可以直接使用 data:image/png;bas ...
php base64解码,PHP Base64 中英文编码 JavaScript 解码
最新PHP Base64 中英文编码 JavaScript 解码以下是三零网为大家整理的最新PHP Base64 中英文编码 JavaScript 解码的文章,希望大家能够喜欢! function ...
php代码在线base64解码,Base64在线编码解码实现代码演示与下载
在线演示地址: gb2312版本 http://tools.jb51.net/tools/base64_decode-gb2312.php utf8版本 http://tools.jb51.net/t ...
javascript中的Base64.UTF8编码与解码详解
javascript中的Base64.UTF8编码与解码详解本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...
des加密+base64编码，base64解码+des解密
des加密+base64编码,base64解码+des解密 des简单介绍 base64简单介绍运行效果图 TestActivity.java DataEncryptionUtil.java des ...
Base64的编码(Encode)与解码(Decode)
Base64的编码(Encode)与解码(Decode) 推荐第一种效率更高. 第一种:java8 新版本 @Testpublic void test1(){//现在Base64编码 import ...
Java如何进行Base64的编码(Encode)与解码(Decode)？
关于base64编码Encode和Decode编码的几种方式 Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便 ...
彻底弄懂base64的编码与解码原理
作者介绍背景 base64的编码原理网上讲解较多,但解码原理讲解较少,并且没有对其中的内部实现原理进行剖析.想要彻底了解base64的编码与解码原理,请耐心看完此文,你一定会有所收获. 涉及算法与逻 ...
Python：data:image/png;base64图片编码解码
编码后的内容,可以在浏览器中直接打开,提示:先去掉回车 data类型的Url大致有下面几种形式 data:,<文本数据> data:text/plain,<文本数据> data ...

前端实现base64解码编码

方法一：btoa 和 atob

方法二：下包

方法三：js实现

前端实现base64解码编码相关推荐

最新文章

热门文章