Почему getImageData дает большой массив?

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

Короткий ответ

1920000/960/500 = 4 Поскольку массив хранит 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

данных = A 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. После установки вы можете ссылаться на элементов в массиве с использованием методов объекта или с использованием стандартного синтаксиса индекса массива (то есть с использованием обозначения в виде скобок).

Answer 2

Вы получаете значения RGB и значение Alpha. Это означает, что вы должны сделать 960 * 500 * 4, что дает правильный результат.