前端中的二进制

ArrayBuffer

  • ArrayBuffer:用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为 byte array

TypedArray

  • TypedArray :它是一个指定特定元素类型(Int8Array)的统称,详情见 MDN
let buffer = new ArrayBuffer(8);  // 8个字节的ArrayBuffer console.log(buffer.byteLength);  // 8字节 const int8Array = new Int8Array(buffer); console.log(int8Array.length);  // 元素的长度 1个字节占用8个位 console.log(int8Array.buffer===buffer);	// true let int16Array = new Int16Array(buffer); console.log(int16Array.length);  // 4字节 

DataView

  • DataView:可以从 ArrayBuffer 对象中读写多种数值类型的底层接口使用它时不用考虑不同平台的字节序(大小端)问题
let buffer = new ArrayBuffer(2); //2个字节的ArrayBuffer console.log(buffer.byteLength); //2 let dataView = new DataView(buffer); console.log(dataView.buffer === buffer); // true dataView.setInt8(0, 1); dataView.setInt8(1, 2); console.log(dataView.getInt8(0)); //1 console.log(dataView.getInt8(1)); //2 console.log(dataView.getInt16(0)); // 取一个二个字节(16位的整数) [0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0] = 258 
  • DataView和TypeArray都 内部引用了buffer, 所以都有.buffer

Blob

  • Blob 表示一个不可变、原始数据的类文件对象
  1. Blob 可以借助 FileReader 转化为其他形式
let debug = {name:'limy'}; let str = JSON.stringify(debug);  console.log(str);	// {"name":"limy"} let blob = new Blob([str],{type:'application/json'});  console.log('blob.size',blob.size);	 // 15 //同样一个blob可以被读成各种类型 function readBlob(blob,type){     return new Promise(function(resolve){         let reader = new FileReader();         reader.onload = function(event){             resolve(event.target.result);         }         switch(type){             case 'ArrayBuffer':                 reader.readAsArrayBuffer(blob);                 break;             case 'DataURL'://二进制数据转成可读的字符串 base64字符串                 reader.readAsDataURL(blob);                 break;             case 'Text':                 reader.readAsText(blob,'utf-8');                 break;             default:                 break;             }     }); } readBlob(blob,'ArrayBuffer').then(result=>{     console.log(result);	// 一个arraybuffer对象,可以通过浏览器看下 }); readBlob(blob,'DataURL').then(result=>{     console.log(result);	// base64格式 data:application/json;base64,eyJuYW1lIjoibGlteSJ9 }); readBlob(blob,'Text').then(result=>{     console.log(result);	// {"name":"limy"} }); 
  1. Blob 下载 | 图片显示
const a = document.createElement('a') a.href = window.URL.createObjectURL(blob)	// 生成的这个url可以放到 src中完成图片显示 a.target = '_blank' a.download = fileName document.body.appendChild(a) a.click() document.body.removeChild(a) 

Base64

  • Base64是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来
  1. 两个常用的方法
let encodedData = window.btoa("Hello, world"); // "SGVsbG8sIHdvcmxk" let decodedData = window.atob(encodedData);    // "Hello, world" 

常用转换

function bufferToBlob(buffer){     return new Blob([buffer]) }  function blobToBuffer(blob) {     const reader = new FileReader();     reader.onload = function(e) {  // 这里是异步结果不能直接获取         console.log(reader.result)     }     reader.readAsArrayBuffer(blob); }  function blobToDataURL(blob){   return window.URL.createObjectURL(blob) }  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     }); }  function arrayBufferToBase64(bytes) {     let binary = ''     const len = bytes.byteLength     for (var i = 0; i < len; i++) {         binary += String.fromCharCode(bytes[ i ])     }     return window.btoa(binary) } 

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 前端中的二进制

提供最优质的资源集合

立即查看 了解详情