Книга: JavaScript. Подробное руководство, 6-е издание

ImageData

ImageData

массив пикселов в элементе <canvas>

Объект ImageData хранит красную, зеленую и синюю составляющие, а также уровень прозрачности для каждого пиксела в прямоугольной области. Получить объект ImageData можно с помощью метода createlmageData() или getlmageData() объекта CanvasRenderingContext2D из тега <canvas>.

Свойства width и height определяют размеры прямоугольника в пикселах. Свойство data - это массив, хранящий информацию о пикселах. Пикселы размещаются в массиве data[] в направлении слева направо и сверху вниз. Каждый пиксел состоит из четырех байт, представляющих компоненты R, G, В и А, именно в этом порядке. Таким образом, получить доступ к компонентам цвета пиксела с координатами (х,у) внутри объекта ImageData можно так:

var offset = (х + y*image.width) * 4;
var red = image.data[offset];
var green = image.data[offset+1];
var blue = image.data[offset+2];
var alpha = image.data[offset+3];

Массив data[] не является истинным массивом - это объект, подобный массиву, оптимизированный для хранения целочисленных элементов со значениями в диапазоне от 0 до 255. Элементы массива доступны для чтения и записи, но свойство length массива имеет фиксированное значение. Для любого объекта і типа ImageData значение свойства i.data.length всегда будет равно значению выражения i.width * і.height * 4.

Свойства

readonly byte[] data

Ссылка, доступная только для чтения, на объект, подобный массиву, доступный для чтения и записи, элементами которого являются байты.

readonly unsigned long height

Количество строк пикселов изображения в массиве data.

readonly unsigned long width

Количество пикселов в строке изображения, в массиве data.

Оглавление книги