Uint8ClampedArray替代或使Uint8Array产生一个钳位的字节值字符串

时间:2014-06-16 09:16:40

标签: javascript html5 html5-canvas typed-arrays

我正在研究这个真正的头颅!

我成功地将字节值添加到Uint8ClampedArray并使用该数组使用此函数生成字节字符串:

this.utf8ArrayToStr = function(array) {
        var s = '';
        for (var i = 0; i < array.length; i++) {
            s += String.fromCharCode(array[i]);
        }
        return s;
};

这可以处理并成功生成正确的字节序列。

问题是并非所有浏览器都支持Uint8ClampedArray,我特别需要它才能在Android浏览器上运行。

我尝试使用标准的Uint8Array,但它会在结果字符串中产生额外的字节值,从而导致错误的行为。

我在这里也发现了一个小垫片,但它没有用,再次产生额外的输出: https://gist.github.com/gengkev/2295355

无论如何我可以让Uint8Array充当Uint8ClampedArray,或者更具体地说,在上面的函数中生成字符串时钳制值?

更新:看起来我正在使用标准阵列,但仍有一些混乱的字符导致问题。

2 个答案:

答案 0 :(得分:4)

我认为您不应该使用Uint8Array来存储您的数据 - 它根本不像Uint8ClampedArray那样工作。例如:

a = new Uint8Array(1);
b = new Uint8ClampedArray(1);
a[0] = 256;
b[0] = 256;

a[0] === 0;    // true
b[0] === 255;  // true

我只会使用常规数组(如果这是一个选项)并在将值存储到数据库中时将其限制,或者当您读取它们时生成如下字符串:

s += String.fromCharCode(Math.max(0, Math.min(255, array[i])));

答案 1 :(得分:4)

WhatWG推荐Uint8ClampedArray存储画布像素数据。

但是,各种浏览器使用Uint8ClampedArray(或不使用)取决于他们是否实现了WhatWG建议。

因此,更多的跨浏览器解决方案是使用.getImageData从画布中提取数组,然后根据需要操作该数组。这样你知道你正在使用兼容阵列。

var imageData = context.getImageData(0,0,canvas.width,canvas.height);

var data = imageData.data;  // this array is always compatible with its browser.