Question

分析HTML5 Canvas中的像素数据：

    var width  = 960;
    var height = 500;
    var canvas = document.getElementById('myFigure');
    var ctx = canvas.getContext("2d");
    var image = new Image("starry-night.jpg");
    ctx.drawImage(image, 0, 0);
    var pixels = ctx.getImageData(0,0, width, height);

图像数据数组的长度为1920000但是当我乘以960*500*3 = 1440000为什么我的计算比实际长度小得多？

有人可以向我解释类型Uint8ClampedArray。

Answer 1

您会收到RGB值和Alpha值。这意味着您必须执行960 * 500 * 4才能产生正确的结果。

Answer 2

简答

1920000/960/500 = 4因为数组存储Alpha的第4个值（RGBA不是RGB）

Uint8ClampedArray表示（U）nsigned（Int）egers的数组，它们被钳位（强制具有最高值）（8）字节。 8字节的无符号整数允许最多256个值（0-255）的唯一位组合。（如果整数被签名，那么你可以有一半的正数和一半的负数）

长答案

根据 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

data =表示一维数组的Uint8ClampedArray 包含RGBA顺序的数据，整数值介于0之间和255（包括）。

和

Uint8ClampedArray包含高度×宽度×4字节的数据索引值范围从0到（高度×宽度×4）-1。

1920000/960/500 = 4

根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray

Uint8ClampedArray类型数组表示一个8位数组无符号整数钳位到0-255;如果你指定了一个值超出范围[0,255]，将设置0或255。该内容初始化为0.一旦建立，您可以参考数组中的元素使用对象的方法，或使用标准数组索引语法（即使用括号表示法）。

为什么getImageData给出一个大数组？

2 个答案: