Base64转二进制文件流以及转File、图片转Base64、二进制流转Base64

1              、Base64转二进制文件流

方法一：

/** * Base64字符串转二进制流 * @param {String} dataurl Base64字符串(字符串包含Data URI scheme 
  
  
  
  
  
  ，例如：data:image/png;base64, ) */ function dataURLtoBlob(dataurl) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime, }); }

调用示例：

let dataurl = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC; let blob = dataURLtoBlob(dataurl);

方法二：

/** * Base64字符串转二进制流 * @param {String} base64 Base64字符串(字符串不包含Data URI scheme) * @param {String} type 文件类型(例如：image/png) */ function base64toBlob(base64, type) { // 将base64转为Unicode规则编码 let bstr = atob(base64), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); // 转换编码后才可以使用charCodeAt 找到Unicode编码 } return new Blob([u8arr], { type, }) }

调用示例：

let dataurl = iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC; let blob = base64toBlob(dataurl, image/png);

 2
 
  
 
  
 
  
 
  
 
  
 
  
 
、Base64转File

方法一：

/** * Base64字符串转File文件 * @param {String} dataurl Base64字符串(字符串包含Data URI scheme 
  
  
  
  
  
  
 ，例如：data:image/png;base64, ) * @param {String} filename 文件名称 */ function dataURLtoFile(dataurl, filename) { let arr = dataurl.split(,); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); }

调用示例：

let dataurl = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC; let file = dataURLtoFile(dataurl, 文件名称);

方法二：

/** * Base64字符串转File文件 * @param {String} base64 Base64字符串(字符串不包含Data URI scheme) * @param {String} filename 文件名称 * @param {String} type 文件类型(例如：image/png) */ function base64toFile(base64, filename, type) { // 将base64转为Unicode规则编码 let bstr = atob(base64); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); // 转换编码后才可以使用charCodeAt 找到Unicode编码 } return new File([u8arr], filename, { type: type }); }

调用示例：

let dataurl = iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC; let file = base64toFile(dataurl, 文件名称, image/png);

补充：

3












、图片转Base64

/** * 图片转换为base64 * @param {Object} img 图片对象 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); var dataURL = canvas.toDataURL("image/" + ext); return dataURL; }

调用示例：

let img = new Image(); img.setAttribute(crossOrigin, anonymous); // 图片地址 img.src = https://img2.baidu.com/it/u=1987571340,2982374133&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500; img.onload = () => { // 获得Base64 let base64Str = getBase64Image(img); console.log(base64Str) }

4  
  
  
  
  
  
  、二进制流转Base64

方法一：

/** * 二进制流转Base64(字符串包含Data URI scheme) * @param {Object} data 二进制流 * @param {String} type 文件类型(例如：image/png) */ function getDataURL(data, type) { return new Promise((resolve, reject) => { const blob = new Blob([data], { type }); const reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = () => resolve(reader.result); reader.onerror = (error) => reject(error); }); }

调用示例：

/** * Base64转二进制流 * @param {String} dataurl Base64字符串(字符串包含Data URI scheme

 


 


 


 


 


 


，例如：data:image/png;base64, ) */ function getBlob(dataurl) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return { data: u8arr, type: mime }; } // 获得二进制流（就不调接口了 
 
 
 
 
 
 ，先用Base64转成二进制流进行测试） let dataurl = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC; let blob = getBlob(dataurl); // 二进制流转Base64 getDataURL(blob.data, blob.type).then((base64) => { console.log(base64); });

方法二：

/** * 二进制流转Base64(字符串不包含Data URI scheme) * @param {Object} data 二进制流 */ function getBase64(data) { let base64 = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), )); return base64; }

调用示例：

// 获得二进制流（就不调接口了 
   
   
   
   
   
   
 ，先用Base64转成二进制流进行测试） let dataurl = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC; let blob = getBlob(dataurl); // 二进制流转Base64 let base64 = getBase64(blob.data); console.log(base64);

5 
  
  
  
  
  
  
、补充

5.1 atob()

atob() 对经过 base-64 编码的字符串进行解码              。你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据
 

 

 

 

 

 

，并且在接受数据之后
 

 

 

 

 

 

 ，使用 atob() 方法再将数据解码
 
  
 
  
 
  
 
  
 
  
 
  
 
。例如：你可以编码


 


 


 


 


 


 

、传输和解码操作各种字符             ，比如 0-31 的 ASCII 码值












。 

使用：

let encodedData = window.btoa("Hello, world"); // 编码

5.2 btoa()

btoa() 方法可以将一个二进制字符串（例如 

 
 

 
 

 
 

 
 

 
 

 
 

，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串  
  
  
  
  
  
  。

你可以使用这个方法来对可能遇到通信问题的数据进行编码












，然后使用 atob() 方法来对数据进行解码 
  
  
  
  
  
  
。例如                    ，你可以对 ASCII 中的控制字符（值为 0 到 31 的字符）进行编码


 


 


 


 


 


 

。

使用：

const encodedData = btoa(Hello, world); // 编码字符串 const decodedData = atob(encodedData); // 解码字符串

5.3 charCodeAt()

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码 
 
 
 
 
 
 
 
 
 
 
 
 
，返回值是 0 - 65535 之间的整数



















，表示给定索引处的 UTF-16 代码单元 
 
 
 
 
 
 。

字符串中第一个字符的位置为 0             ， 第二个字符位置为 1 
  
 
  
 
  
 
  
 
  
 
  
 
 ，以此类推  
   
   
   
   
   
   
。

使用：

var str = "Hello, world"; var code = str.charCodeAt(0);

5.4 fromCharCode()

fromCharCode() 可接受一个指定的 Unicode 值













，然后返回一个字符串

 

 

 

 

 

 
。

注意：该方法是 String 的静态方法 
  
  
  
  
  
  ，字符串中的每个字符都由单独的 Unicode 数字编码指定
 

 

 

 

 

 

 。使用语法： String.fromCharCode()             。

使用：

var str = "Hello, world"; var code = str.charCodeAt(0); var result = String.fromCharCode(code);