将ArrayBuffer和base64转为blob临时地址

base64转换为blob

可以参考我之前的一篇文章：《url、base64、blob相互转换方法》

本页案例通用这个base64图片：

var base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGQkY4Qzg1NjlERjExRUM5REQwQzc1NDFCRDg3ODI1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGQkY4Qzg2NjlERjExRUM5REQwQzc1NDFCRDg3ODI1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZCRjhDODM2OURGMTFFQzlERDBDNzU0MUJEODc4MjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZCRjhDODQ2OURGMTFFQzlERDBDNzU0MUJEODc4MjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6lJhElAAAANklEQVR42mL8//8/AzJgZGQECwDFGZHFmRiIBEQrZAFa1YBNAl0c5I7/xJjIOHCeob5CgAADABOSEBPQpeufAAAAAElFTkSuQmCC';

将base64转换为blob的方法（blob是可以提交到后台的，后台可以接收并处理）：

//将base64转换为blob对象 解决低版本浏览器兼容问题
function dataURLtoBlob(dataurl) {
     var arr = dataurl.split(',');
      //注意base64的最后面中括号和引号是不转译的   
      var _arr = arr[1].substring(0,arr[1].length-2);
      var mime = arr[0].match(/:(.*?);/)[1],
          bstr =atob(_arr),
          n = bstr.length,
          u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
          type: mime
      });
}

其中Uint8Array（）有polyfill，我就直接引用了地址：原github的地址点击查看 或者看我本地的代码：http://code.wubin.work/code/js/base64-arraybuffer-blob/typedarray.js

需要注意的是原作者规定了数组最大长度是 1e5（10000），如果你的数组比这个还大，需要手动改一下源代码 MAX_ARRAY_LENGTH 的值。但作者之所以设了这么一个最大值，是因为在低版本浏览器里用 Array 来模拟 BufferArray 的话是有性能问题的，所以慎重使用。

进行转换

// 直接将blob转化为blob链接
let blob = dataURLtoBlob(base64); 
// 从blob对象中创建url
let src_blob1 = URL.createObjectURL(blob);
console.log('blob对象直接创建的src', src_blob1);

点击查看：http://code.wubin.work/code/js/base64-arraybuffer-blob/

将Blob对象转换为file

// 直接将blob转化为blob链接
let blob = dataURLtoBlob(base64); 
// 创建一个文件 转化为blob链接
let file1 = new File([blob], 'blob', {
     type: 'image/png'
});
let src1 = URL.createObjectURL(file1);
console.log('通过file对象创建的src', src1);

点击查看：http://code.wubin.work/code/js/base64-arraybuffer-blob/

将base64转为ArrayBuffer再转为blob

将base64转为二进制的arrayBuffer，然后再将arrayBuffer二进制转换为blob（同时也是arrayBuffer转为blob临时路径的方法）

首先是两个工具方法：

function b64ToUint6 (nChr) {
  return nChr > 64 && nChr < 91 ?
      nChr - 65
    : nChr > 96 && nChr < 123 ?
      nChr - 71
    : nChr > 47 && nChr < 58 ?
      nChr + 4
    : nChr === 43 ?
      62
    : nChr === 47 ?
      63
    :
      0;
}

// 将base64转换为二进制arraybuffer
// 注意传入的base64前面不能有data:image/png;base64之类 要去掉
function base64DecToArr (sBase64, nBlockSize) {

  var
    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
    nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen);

  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
    nMod4 = nInIdx & 3;
    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
    if (nMod4 === 3 || nInLen - nInIdx === 1) {
      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
        aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
      }
      nUint24 = 0;
    }
  }

  return aBytes;
}

更多的utf8、utf16转换base64和编码解码，可以参考该MDN页面 以上方法就来源于此页面。

转换的操作：

// 将base64转化为arrayBuffer 先去掉前面的data:等
let base64_buffer = base64.split(',')[1];
let arrayBuffer = base64DecToArr(base64_buffer); 
// 这里获取二进制用于转换的arrayBuffer 需要获取.buffer
console.log('arrayBuffer对象', arrayBuffer, arrayBuffer.buffer);
// 二进制转化为blob
let file2 = new File([arrayBuffer.buffer], 'arraybuffer', {
         type: 'image/png'
});
 // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL
let src2 = URL.createObjectURL(file2);
console.log('base65->arraybuffer->file对象', src2);

点击查看：http://code.wubin.work/code/js/base64-arraybuffer-blob/

相关资料