フロントエンドのバイナリ


ArayBuffer
  • ArrayBuffer共通の、固定長さを表すオリジナルのバイナリデータバッファ.バイト配列で、通常は他の言語ではbyte array
  • TypedAray
  • TypedArray特定の要素タイプ(Int 8 Aray)を指定する総称であり、詳細は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:複数の数値タイプが書かれた底のインターフェースを読んで使用することができるので、プラットフォームのバイト順(大きさの端)を考慮しなくてもいい
  • 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
    
  • Data ViewとType Arayは全部内部的にブザーを引用していますので、全部あります.ブザー
  • Blob
  • Blobは、可変ではないオリジナルデータの種類のファイルオブジェクト
  • 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"}
    });
    
  • 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)
    
    Base 64
  • Base 64は、radix-64の表現形式と解釈したバイナリデータをASCII文字列のフォーマットで表すことができるように、同じバイナリからテキスト(binary-to-text)までの符号化ルールである.
  • 2つのよく使われる方法
  • 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)
    }