js 处理二进制

1、文件下载

/**
 * 文件下载
 * @param {*} res Blob 数据或 Blob 数组
 * @param {*} fileName 文件名
 */
export const downFile = (res, fileName) => {
  if (!res) {
    return;
  }
  if (window.navigator.msSaveBlob) {
    // IE以及IE内核的浏览器
    try {
      window.navigator.msSaveBlob(res, fileName);
    } catch (e) {
      throw new Error(e);
    }
  } else {
    let url = window.URL.createObjectURL(
      new Blob(Array.isArray(res) ? res : [res]),
    );
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', fileName); // 文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 下载完成移除元素
    window.URL.revokeObjectURL(url); // 释放掉 blob 对象
  }
};

2、Blob转为img并使用canvas绘制

/**
 * Blob 转图片
 * @param {*} data Blob 数据
 */
export const getBlobToCanvas = (blob) => {
  const reader = new FileReader();
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  reader.onload = evt => {
    const url = evt.target.result;
    const imgs = new Image();
    imgs.src = url;
    imgs.onload = () => {
      // canvas.width = imgs.width;
      // canvas.height = imgs.height;
      // ctx.drawImage(imgs, 0, 0, imgs.width, imgs.height);
      canvas.width = 1278;
      canvas.height = 652;
      ctx.drawImage(imgs, 0, 0, 1278, 652); // 指定高宽
    };
  };
  reader.readAsDataURL(blob);
}

3、Blob转base64

export const getBlobToBase64(blob) {
  var reader = new FileReader();
   reader.readAsDataURL(blob);
   reader.onload = function (e) {
     const base64Str = e.target.result;
     console.log(base64Str);
   }
}

4、file转base64

export const getFileToBase64(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    const base64Str = e.target.result;
    console.log(base64Str);
  };
}

5、base64转file

export const getBase64ToFile(base64Str, fileName) {
  let arr = base64Str.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 File([u8arr], fileName, {type:mime});
}

6、base64转blob

export const getBase64ToBlob(base64Str) {
    //console.log(base64Str);//data:image/png;base64,
    let byteString;
    if(base64Str.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Str.split(',')[1]);//base64 解码
    else{
        byteString = unescape(base64Str.split(',')[1]);
    }
    const mimeString = base64Str.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
    let ia = new Uint8Array(byteString.length);//创建视图
    for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    let blob = new Blob([ia], {
        type: mimeString
    });
    return blob;
}

7、String转Blob

//将字符串 转换成 Blob 对象
var blob = new Blob(["Hello World!"], {
    type: 'text/plain'
});
console.info(blob);
console.info(blob.slice(1, 3, 'text/plain'));

8、将TypeArray 转换成 Blob 对象

//将 TypeArray  转换成 Blob 对象
var array = new Uint16Array([97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33]);
//测试成功
//var blob = new Blob([array], { type: "application/octet-binary" });
//测试成功， 注意必须[]的包裹
var blob = new Blob([array]);
//将 Blob对象 读成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result); //a Hello world!
}

9、ArrayBuffer转Blob

var buffer = new ArrayBuffer(32);
var blob = new Blob([buffer]);       // 注意必须包裹[]

10、将Blob对象转换成String字符串

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result);
}

11、将Blob对象转换成ArrayBuffer

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
    console.info(reader.result); //ArrayBuffer {}
    //经常会遇到的异常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2
    //var buf = new int16array(reader.result);
    //console.info(buf);

    //将 ArrayBufferView  转换成Blob
    var buf = new Uint8Array(reader.result);
    console.info(buf); //[228, 184, 173, 230, 150, 135, 229, 173, 151, 231, 172, 166, 228, 184, 178]
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };

    //将 ArrayBufferView  转换成Blob
    var buf = new DataView(reader.result);
    console.info(buf); //DataView {}
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };
}