码迷,mamicode.com
首页 > 编程语言 > 详细

二进制数组ArrayBuffer

时间:2020-05-25 09:24:05      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:new   socket   web   位置   通过   一段   赋值   eof   简单   

概述

接口设计的原始目的,与WebGL项目有关。 所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足
javascript与显卡之间的大量的数据、实时的数据交换,他们之间的通信必须是二进制的,而不能是传统的文本格式

  • ArrayBuffer对象 代表原始的二进制数据
  • TypedArray 用来读写简单类型的二进制数据
  • DataView 用来读写复杂的类型的二进制数据

已知操作浏览器的API,用到了二进制数组的有

  • File API
  • XMLHttpRequest
  • Fetch API
  • Canvas
  • WebSocket

ArrayBuffer对象

只能通过视图(TypeArray视图和DataView视图)来读写,视图的作用是以指定的格式来解读二进制数据
ArrayBuffer也是一个构造函数,可以分配一段存放数据的连续内存空间

var buf = new ArrayBuffer(32); //32字节

ArrayBuffer.prototype.byteLength

  • 返回所分配的内存区域的字节长度
var buffer = new ArrayBuffer(32);
console.info(buffer.byteLength); //32

ArrayBuffer.prototype.slice()

  • 允许将内存区域的一部分,拷贝到一个新的ArrayBuffer对象
var buffer = new Arraybuffer(8);
var newBuffer = buffer.slice(0,3); // 分配一个新的内存,将原来的值赋值过去

Arraybuffer.isView()

  • 静态方法isView,返回一个boolean值,表示参数是否为ArrayBuffer的视图实例
var buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer); //false

var v = new Int32Array(buffer);
ArrayBuffer.isView(v); //true

TypedArray视图

  • 一组构造函数,代表不同的数据格式

  • Int8Array 8位有符号 len = 1

  • Uint8Array 8位无符号 len = 1

  • Unit8ClampedArray 8位无符号整数,len = 1,溢出处理不同

  • Int16Array 16位有符号 len = 2

  • Uint16Array 16位无符号 len = 2

  • Int32Array(buffer); 32位有符号 len = 4

  • UnitArray(buffer); 32位无符号 len = 4

  • Float32Array 32位浮点数 len = 4

  • Float64Array 64位浮点数 len = 8

  • 构造方式

  • TypedArray(buffer, byteOffset, length?);

var b = new ArrayBuffer(8);
var v1 = new Int32Array(b);

var v2 = new Unit8Array(b, 2);

var v3 = new Int16Array(b, 2, 2);
  • TypedArray(length)
var abcd = new Float64Array(8);
abcd[0] = 10;
  • TypedArray(typedArray)
var typedArray = new Int8Array(new Unit8Array(8));
  • TypedArray(arrayLikeObject)
var typeArray = new Unit8Array([1,2,3,4,5]);

复合视图

  • 由于视图的构造函数可以指定起始位置和长度,所以在同一段内存中,可以依次存放不同类型的数据
var buffer = new ArrayBuffer(24);

var idView = new Int32Array(buffer, 0, 1);
var nameVidw = new Int32Array(buffer, 4, 1);
var ageVidw = new Int32Array(buffer, 8, 1);

DataView视图

  • DataView 视图本身也是构造函数,,接受一个ArrayBuffer对象作为参数,生成视图
   DataView(ArrayBuffer buffer[, 字节起始位置 [, 长度]])
  • 大端字节序读取与小端字节序读取不同; 默认是大端字节序读取数据
  • dv.getUint16(1, true) // 小端
  • dv.getUint16(3, false) // 大端

二进制数组的应用

ajax, canvas, file, websocket, fetch

var canvas = document.getElmentById(‘myCanvas‘);
var ctx = canvas.getContext(‘2d‘);

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var uint8ClampedArray = imageData.data;

uint8ClampedArray 类型专门针对颜色,把每个字节解读成无符号的8位整数,即只能取值0~255,
而且发生运算的时候自动过滤高位溢出; 即超过255,处理结果为255, 小于0处理结果为0

二进制数组ArrayBuffer

标签:new   socket   web   位置   通过   一段   赋值   eof   简单   

原文地址:https://www.cnblogs.com/pengsn/p/12954815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!