JavaScript中关于base64的一些事

base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。

base64 由字母 a-z 、 A-Z 、 0-9 以及 + 和 / , 再加上作为垫字的 = , 一共65字符组成一个基本字符集, 其他所有字符都可以根据一定规则, 转换成该字符集中的字符。

abcde => YWJjZGU= ABCDE => QUJDREU=

在日常开发中, 最常见的便是将 blob 和 base64 之间相互转换.

// blob to base64
function blobTobase64(blob) {
 const fileReader = new FileReader()
 let base64 = ''
 fileReader.onload = () => {
 base64 = fileReader.result // 读取base64
 }
 fileReader.readAsDataURL(blob) // 读取blob
}
// base64 to blob
function dataURItoBlob(dataURI) {
 var mimeString = dataURI
 .split(',')[0]
 .split(':')[1]
 .split(';')[0] // mime类型
 var byteString = atob(dataURI.split(',')[1]) //base64 解码
 var arrayBuffer = new ArrayBuffer(byteString.length) //创建ArrayBuffer
 var intArray = new Uint8Array(arrayBuffer) //创建视图
 for (var i = 0; i < byteString.length; i++) {
 intArray[i] = byteString.charCodeAt(i)
 }
 return new Blob([intArray], { type: mimeString }) // 转成 blob
}

编码和解码

浏览器

最新的浏览器自带了两个方法用于 base64 的编码和解码

分别是 at

ob 和 btoa

  • atob：将 base64 转成 8bit 字节码
  • btoa：将 8bit 字节码转成 base64

对于旧版浏览器, 可以使用 js-base64

Node

目前 node 中还不支持使用 atob 和 btoa ，但是可以通过 Buffer 来实现,参考文档

if (typeof btoa === 'undefined') {
 global.btoa = function (str) {
 return Buffer.from(str).toString('base64');
 };
}

if (typeof atob === 'undefined') {
 global.atob = function (b64Encoded) {
 return Buffer.frome(b64Encoded, 'base64').toString();
 };
}

转换方式

base64编码方式对于中文是不适用的, 因为中文对应多个字节, 因此可以先使用 encodeURIComponent 编码后再进行 base64 编码.

源码

编码

每三个字节作为一组，每个字节8bit, 一共是24个二进制位。

'ABCD'
["ABC", "D"] // 每三字节做一组
['01000001010000100100001', '01000100'] // 转成8bit

将每组的24个二进制位再细分为四组，每组有6个二进制位, 此时为二维数组。

[['010000', '010100', '001001', '000011'], ['010001', '00']]

  • 二个字节的情况：将这二个字节的一共16个二进制位, 按照上面的规则, 转成三组, 那么最后一项只有4位，则在后面加两个0, 补够6位, 并在第三步对应位置加上垫字符 = 。
  • 一个字节的情况：将这一个字节的8个二进制位，按照上面的规则转成二组, 那么最后一项只有2位, 则在后面加上四个0, 并在第三步对应位置加上两个垫字符 = 。
  • 简单说就是, 缺多少位就在后面补多少个0, 直到满6位。

[['010000', '010100', '001001', '000011'], ['010001', '000000']]

在每组前面加两个00，扩展成32个二进制位，即四个字节。

规则是这么说, 但这一步我觉得可以忽略, 因为 00101010 和 101010 是一样的

将每组对应的二进制转成十进制, 在 base64char 字符集中找到对应的字符。

[["Q", "U", "J", "D"], ["R", "A"]]

每一组都最终都应该转成四个字符

如果不足四个字符, 说明明文中并不足3字节, 因此需要补上垫字符 = , 补够四个字符

[["Q", "U", "J", "D"], ["R", "A", "=", "="]]

将最后的结果连接成字符串, 则为最终编码结果。

'ABCD' > 'QUJDRA=='

根据编码方式来看, 每3个字节将会被编码成四个字符, 如果不足3个字节, 则补上垫字符 = , 缺几个就补几个。

btoa('A') // "QQ=="
btoa('AB') // "QUI="
btoa('ABC') // "QUJD"
btoa('ABCD') // "QUJDRA=="

解码

解码步骤就是跟编码步骤反过来

  1. 每四个字节分为一组。
  2. 将每组的中除了垫字符 = 外的字符, 在 base64char 字符集中找到所在下标。
  3. 将十进制下标转成二进制, 如果不够6位（一定不会超过6位）, 则在前面补 0 。
  • 如果遇到垫字符 = , 说明其明文不足3字节, 则根据垫字符 = 的数量, 在该组最后一项中去掉对应个数的 0
  • 一个垫字符, 则去掉两个 0
  • 两个垫字符, 则去掉四个 0
  1. 将每组中的二进制字符串连接，此时字符串长度一定是8的倍数，然后每8位分割成一个字节。
  2. 通过 String.fromCharCode 将二进制转成字符, 然后拼接
  3. 将各个字符连接, 为最终解码结果。

题外-进制转换

  • parseInt(str, radix): 根据radix可以将字符串转成十进制
  • initValue.toString(radix): 将initValue转成其他进制
// n进制转十进制
parseInt('1000', 2) // 8
parseInt('1000', 16) // 4096

// 进制间转换
(10).toString(2) // "1010", 10进制转2进制
(0xff).toString(2) // "11111111", 16进制转2进制

总结

以上所述是小编给大家介绍的JavaScript中关于base64的一些事，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Javascript实现base64的加密解密方法示例

    这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值.如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致.于是准备使用通用的base64加密解密. base64 加密解密 下方是base64用javascript写出来的函数和方法. //1.加密解密方法使用: //1.加密 var str = '124中文内容'; var base = new Base64(); var result = base.enco

  • JavaScript Base64 作为文件上传的实例代码解析

    例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406

  • JS实现的base64加密解密操作示例

    JS实现的base64加密解密操作示例

    本文实例讲述了JS实现的base64加密解密操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js base64加密解密</title> </head> <body> <script> // 创建Base64对象 var Base64 = { _keyStr: &qu

  • javascript使用btoa和atob来进行Base64转码和解码

    javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用.当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现. 好了,前言说了一大堆,Base64转码和解码有哪些方法: 一.我们来看看,在javascript中如何使用Base64转码 var str = 'javascript'; window

  • js 图片转base64的方式(两种)

    方式一:Blob和FileReader 对象 实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo

  • js实现把图片的绝对路径转为base64字符串、blob对象再上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

  • Javascript将图片的绝对路径转换为base64编码的方法

    Javascript将图片的绝对路径转换为base64编码的方法

    我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: 复制代码 代码如下: var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; 我们如下编写代码: function getBase64Image(img) { var canvas = document.createElement("canva

  • JS 实现Base64编码与解码实例详解

    Js实现Base64编码与解码 Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍. Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符. Base64常用于在通常处理文本数据的场合,表示.传输.存储一些二进制数据.包括MIME的email,email via MIME, 在XML中存储复杂数据.

  • JavaScript中关于base64的一些事

    base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一. base64 由字母 a-z . A-Z . 0-9 以及 + 和 / , 再加上作为垫字的 = , 一共65字符组成一个基本字符集, 其他所有字符都可以根据一定规则, 转换成该字符集中的字符. abcde => YWJjZGU= ABCDE => QUJDREU= 在日常开发中, 最常见的便是将 blob 和 base64 之间相互转换. // blob t

  • javascript中的Base64、UTF8编码与解码详解

    Base64编码说明 Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='. base64编码库:(已验证可用) 复制代码 代码如下: var base64 = (function(){     var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmn

  • JavaScript中常用的正则表达式日常整理(全)

    //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false return true } 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注

  • 全面解析JavaScript中apply和call以及bind(推荐)

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: •作为函数 •作为方法 •作为构造函数 •通过它们的call()和apply()方法间接调用 前面的三种调用方法,我们都知道且不在这篇文章的讨论范围内,就不说了. 下面我们来说说这第四种调用方法 通过call()和apply()间接调用 其实,我们可以将这两个函数看做是某个对象的方法,通过调用方法的方式来间接调用函数: function f(){} f.call(o); f.

  • JavaScript中从setTimeout与setInterval到AJAX异步

    setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },100) setTimeout(function() { console.log(3); },50) console.log(4); 打印结果是 1.4.3.2,你可能觉得理所应当,那我们再看下下面这个例子 console.log(1); setTimeout(function() { console

  • 深入探讨javascript中的数据类型

    深入探讨javascript中的数据类型

    学一门编程语言,无非两方面:一是语法,二是数据类型.类C语言的语法不外乎if.while.for.函数.算术运算等,面向对象的语言再加上object. 语法只是语言设计者预先做的一套规则,不同语言语法不尽相同,但都有一些共通点,对于熟悉一两门编程语言的人,学其他的编程语言时,语法往往不是问题(当然,如果你一直学的是类C语言,那么首次接触lisp时肯定也要花些时间),学习的重点往往是数据类型及其相关操作上,不是有句老话:"数据结构+算法＝程序"!其次,有些语言的语法本身就存在设计问题(j

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • Javascript中八种遍历方法的执行速度深度对比

    前言 遍历数组或对象是一名程序员的基本素养之一. 然而遍历却不是一件简单的事, 优秀的程序员知道怎么去选择合适的遍历方法, 优化遍历效率. 本篇将带你走进JavaScript遍历的世界, 享受分析JS循环的快感. 本篇所有代码都可以直接运行, 希望您通读本篇后, 不止是浏览, 最好是亲手去实践下. 概述 js有如下两种数据需要经常遍历 数组(Array) 对象(Object) 同时又提供了如下8种方法方便我们遍历元素 for while(或do~while) forEach for in $.e

  • 对JavaScript中this指针的新理解分享

    一直以来对this的理解只在可以用,会用,却没有去深究其本质.这次,借着<JavaScript The Good Parts>,作了一次深刻的理解.(所有调试都可以在控制台中看到,浏览器F12键) 下面我们一起来看看这个this吧. 在我们声明一个函数时,每个函数除了有定义时的parameters(形参),自身还会有额外的两个参数,一个是this,一个是arguments(实参).arguments就是函数实际接受到的参数,是一个类数组.arguments我只做个简略的介绍,重点我们放在thi

  • javascript中使用正则表达式进行字符串验证示例

    var reg=/正则表达式/: boolean reg.test(要验证的字符串); js引擎会将/正则表达式/""转换成一个RegExp对象,当字符串满足正则表达式的要求事,返回true. 我写的一个表达式验证示例:功能如下: 用户名,不能为空 密码6为数字 密码确认,两次输入密码必须相同 身份证号码必须是15位,或者是18位,最末尾也可以是X(该功能还没有写,有时间再补上) 复制代码 代码如下: <!DOCTYPE html> <html> <hea

随机推荐