Получение данных пикселей

Paper.js предоставляет мощные инструменты для работы с растровой графикой через объект Raster. Работа с пикселями открывает возможности анализа изображений, фильтрации, генерации эффектов и динамического взаимодействия графики с данными.

Создание и загрузка растрового изображения

Для начала работы с пикселями необходимо создать объект Raster:

var raster = new Raster('example.jpg'); // Загружает изображение по URL
raster.position = view.center;          // Размещает изображение в центре холста

Важно: Для корректного доступа к пикселям изображение должно быть полностью загружено. Используется событие onLoad:

raster.onL oad = function() {
    console.log('Изображение загружено');
};

Доступ к отдельным пикселям

Каждый пиксель объекта Raster можно получить через метод getPixel(x, y):

var pixelColor = raster.getPixel(50, 100);
console.log(pixelColor.red, pixelColor.green, pixelColor.blue, pixelColor.alpha);

x и y — координаты пикселя относительно верхнего левого угла изображения.
Возвращается объект Color, позволяющий работать с компонентами RGBA.

Для изменения цвета пикселя используется setPixel:

raster.setPixel(50, 100, new Color(1, 0, 0, 1)); // Красный пиксель

Особенность: Color в Paper.js использует значения от 0 до 1 для всех каналов.

Массовая обработка пикселей

Для анализа или модификации больших областей удобнее работать с массивами пикселей через raster.pixels. Однако Paper.js не предоставляет прямого доступа к массиву пикселей; вместо этого используется getImageData и setImageData из CanvasRenderingContext2D:

var ctx = raster.getContext();                 // Получаем CanvasRenderingContext2D
var imageData = ctx.getImageData(0, 0, raster.width, raster.height);
var data = imageData.data;                     // Массив Uint8ClampedArray RGBA

for (var i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i];      // Инверсия красного канала
    data[i+1] = 255 - data[i+1];  // Инверсия зелёного
    data[i+2] = 255 - data[i+2];  // Инверсия синего
    // data[i+3] — альфа, оставляем без изменений
}

ctx.putImageData(imageData, 0, 0);           // Применяем изменения

Каждые 4 элемента массива соответствуют RGBA одного пикселя.
Такой способ позволяет реализовать фильтры, преобразования яркости, контраста и эффекты «живого» изображения.

Получение цвета по координатам на холсте

Если изображение может быть перемещено или масштабировано, координаты пикселей нужно преобразовать через локальные координаты:

var localPoint = raster.globalToLocal(new Point(150, 200));
var color = raster.getPixel(localPoint);

globalToLocal переводит координаты холста в координаты растрового изображения.
Позволяет получать цвет пикселя с учётом смещений, масштабирования и поворотов.

Работа с прозрачностью и альфа-каналом

Paper.js учитывает альфа-канал при чтении и записи пикселей:

var color = raster.getPixel(10, 10);
if (color.alpha < 0.5) {
    raster.setPixel(10, 10, new Color(1, 1, 1, 0)); // Делает пиксель полностью прозрачным
}

Значение alpha варьируется от 0 (прозрачный) до 1 (непрозрачный).
Это позволяет создавать маски, эффекты плавного исчезновения и сложные композиции.

Использование пикселей для анализа изображения

Доступ к пикселям открывает возможности анализа:

Средний цвет изображения:

var total = new Color(0, 0, 0);
for (var y = 0; y < raster.height; y++) {
    for (var x = 0; x < raster.width; x++) {
        total = total.add(raster.getPixel(x, y));
    }
}
var average = total.divide(raster.width * raster.height);
console.log(average);

Поиск ярких или тёмных областей — сравнение color.gray или color.brightness.
Создание градиентов и карт интенсивности — на основе компонент RGB или яркости.

Интерактивная работа с пикселями

Paper.js позволяет изменять пиксели динамически на основе событий:

raster.onMouseM ove = function(event) {
    var point = raster.globalToLocal(event.point);
    var color = raster.getPixel(point);
    color.red = Math.min(1, color.red + 0.1);
    raster.setPixel(point, color);
};

Изменения применяются мгновенно, создавая эффект «живого» изображения.
Можно комбинировать с другими элементами Paper.js, такими как Path и Layer, для сложной интерактивной графики.