Javascript TypedArray 解惑:Uint8Array 与 Uint8ClampedArray 的区别

原创 2014年12月30日 20:32:48

JS的类型数组大体可分为3类:无符号整数、有符号整数、浮点数。

Int8Array; Uint8Array; Uint8ClampedArray; Int16Array; Uint16Array; Int32Array; Uint32Array; Float32Array; Float64Array;

基本上都可以望文生义,看名字就知道怎么回事。

但是有一个例外 Uint8ClampedArray ,它与 Uint8Array 颇为相似,但又有所区别。

因为颜色数据刚好都是符合8位二进制的无符号整数,所以这两个类型在处理Canvas绘图数据时常常用到。

Uint8ClampedArray主要用于某些特殊场景,典型的就是 ImageData.

clamped这个词的字面意思是“紧固的,夹紧的”。

如果输入的值已经是0~255之间的整数,那么Uint8Array 与 Uint8ClampedArray的最终结果是一致的。


Uint8Array 与 Uint8ClampedArray 的区别,就在于处理不在该范围(0~255之间的整数)的输入数值的转换逻辑的差异。


Uint8Array采用的转换逻辑是ToUint8 . 

其中一个关键点是,它将输入数与256取模,将8个比特位转化为正整数,它也不会进行四舍五入。

所以 new Uint8Array([33.999]) 等价于 new Uint8Array([33.111])

特别注意,对于负数来说,由于负数的二进制存储形式是补码形式的,其转换后得到的值与输入值的联系就不直观了。

例如 -23,二进制是11101001即得233 (23的二进制是00010111,它的补码就是11101001),

所以new Uint8Array([-23]) 等价于 new Uint8Array([233])


详细规则如下:

  1. Let number be ToNumber(argument).
  2. ReturnIfAbrupt(number).
  3. If number is NaN, +0, −0, +∞, or −∞, return +0.
  4. Let int be sign(number) × floor(abs(number)).
  5. Let int8bit be int modulo 28.
  6. Return int8bit.

Uint8ClampedArray 采用的转换逻辑是ToUint8Clamp

它会将负数归入0,大于255的数归入255,所以取模就不用了。

所以new Uint8ClampedArray([-23]) 等价于 new Uint8ClampedArray([ 0 ])

上面说到 new Uint8Array([-23]) 等价于 new Uint8Array([ 233 ]) ,这样就看出差别了吧。

另外,它不是直接取整,而是会处理舍入,但并不是像Math.round()那样的四舍五入,而是采用一种叫做银行家舍入的方法。


详细规则如下:

  1. Let number be ToNumber(argument).
  2. ReturnIfAbrupt(number).
  3. If number is NaN, return +0.
  4. If number ≤ 0, return +0.
  5. If number ≥ 255, return 255.
  6. Let f be floor(number).
  7. If f + 0.5 < number, then return f + 1.
  8. If number < f + 0.5, then return f.
  9. If f is odd, then return f + 1.
  10. Return f.

参考

Uint8Array 拷贝操作的坑(buffer)

Uint8Array 声明let u8a=new Uint8Array(10); console.log(u8a);//Uint8Array(10) [0, 0, 0, 0, 0, 0, 0, 0, ...
  • g332065255
  • g332065255
  • 2017年05月24日 19:36
  • 1194

javascript中Uint8Array类型的subarray方法陷阱

var a = new Uint8Array([0,1,2,3,4,5,6,7,8,9]); var new_a = a.subarray(2); console.log(a.length);   ...
  • jjj4856951
  • jjj4856951
  • 2016年04月08日 19:57
  • 1658

ArrayBuffer:类型化数组

ArrayBuffer:类型化数组 来自《JavaScript 标准参考教程(alpha)》,by 阮一峰 目录 分配内存 视图 视图的生成 视图的操作 复合视图 ...
  • lichwei1983
  • lichwei1983
  • 2015年02月20日 23:43
  • 25838

【ReactNative/JS】uint8array转string convert uint8array to string

【ReactNative/JS】uint8array转string convert uint8array to string 标签: uint8arraystringconvert转换uint16...
  • lltaoyy
  • lltaoyy
  • 2017年04月19日 09:45
  • 2720

ie8 及以下不支持 array.map 的解决方式

ie8及以下对数组使用map方法会报错 :对象不支持“map”属性或方法 解决方法: 添加如下兼容代码 // Production steps of ECMA-262, Edition...
  • ISaiSai
  • ISaiSai
  • 2015年08月07日 11:47
  • 5492

JS中文字符串和UTF-8编码字符串相互转换

1.中文字符串转化为UTF-8编码,如“”的UTF-8编码为“%3C%E6%B1%89%E5%AD%97%3E” 2.UTF-8编码字符串“%E6%B1%89%E5%AD%97”的中文为“” ...
  • lybwwp
  • lybwwp
  • 2013年11月24日 21:26
  • 58244

javascript uint8数组和uint32之间的转换

低位在前,高位在后 function intTobytes(value){ var a=new Uint8Array(4) a[3]=(value >> ...
  • liuhongyi0104
  • liuhongyi0104
  • 2018年01月23日 16:33
  • 27

TypedArray 使用

该类的作用 获取自定义view的属性 1、创建TypedArray对象 使用场景一(view的构造方法中) TypedArray a = context.obtainStyl...
  • ID19870510
  • ID19870510
  • 2015年11月26日 13:57
  • 830

HTML5引入的新数组TypedArray介绍

Javascript中的数组是个强大的家伙: 你可以创建的时候不规定长度,而是动态的去改变长度。你可以把他当成普通的数组去读取,也可以当他是堆栈来使用。你可以改变数组中每个元素的值甚至是类型。 ...
  • hsany330
  • hsany330
  • 2016年09月18日 18:43
  • 503

JavaScript TypeArray

1、利用java传递字节流 import java.io.FileOutputStream; import java.nio.ByteBuffer; /** * Created by wikid...
  • u013234372
  • u013234372
  • 2015年10月26日 17:37
  • 565
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript TypedArray 解惑:Uint8Array 与 Uint8ClampedArray 的区别
举报原因:
原因补充:

(最多只允许输入30个字)