Base64转二进制文件流以及转File、图片转Base64、二进制流转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 的字符）进行编码。
> 
>