За каждый пиксель!

Ну хватит мучить кошек. Но, не отходя далеко от операций с готовыми изображениями, стоит рассмотреть, как canvas может работать с рисунком попиксельно. За это отвечают два метода — getImageData() и putImageData(). Сначала посмотрим, как они работают на практике. Следующим кодом мы обесцветим цветную фотографию (рис. 46):

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript"> function displayImage(url) {

Var canvas = document. getElementById("myCanvas"); var ctx = canvas. getContext("2d");

MyImage. onload = function() { ctx. drawImage(myImage, 0, 0);

MyImage = ctx. getImageData(0, 0, myImage. width, myImage. height): var picLength = myImage. width * myImage. height ;

For (var i = 0; i < picLength * 4; i += 4) { var myRed = myImage. d a t a[i]: var myGreen = myImage. data[i + 1]; var myBlue = myImage. data[i + 2]; myGray = parseInt((myRed + myGreen + myBlue) / 3); myImage. data[i] = myGray; myImage. data[i + 1] = myGray; myImage. data[i + 2] = myGray;

}

Ctx. putImageData(myImage, 0, 0);

}

MyImage. src = url;

}

</script>

</head>

<body onload="displayImage(‘vitebsk. j pg’ )">

<img id="myPhoto" src="vitebsk. jpg" >

<canvas id="myCanvas" width="600" height="800"></canvas>

</body>

</html>

Рис. 46. Попиксельно обесцвечиваем изображение

Сначала мы создам объект Image, источником которому служит исходный рисунок. Затем с помощью drawImage создаем на его основе новое изображение. Далее в переменную myImage получаем от него данные методом getImageData().

Этот метод возвращает данные о цвете (RGB) и прозрачности указанного заданного холста. В качестве параметров он принимает координаты левого верхнего угла участка и его размеры (ширину и высоту). Метод возвращает значения в виде массива пикселей, причем каждый пиксель, в свою очередь, представлен массивом из четырех параметров:

- imageData. data[0] — значение красного цвета (число от 0 до 255);

- imageData. data[1] — значение зеленого цвета (число от 0 до 255);

- imageData. data[2] — значение синего цвета (число от 0 до 255);

- imageData. data[3] — значение прозрачности (число от 0 до 255).

Причем это одномерный массив — все значения идут подряд.

Далее мы обходим весь массив, заполняя все значения усредненным серым цветом, а затем «перезаписываем» цветовую схему изображения методом ctx. putImageData(). Его аргументами служат массив данных, только что нами откорректированный, и координаты левого верхнего угла размещаемого на холсте объекта относительно самого холста.

Имея доступ к каждому пикселю, мы можем действительно творить что угодно. Например, вот так, чуть-чуть модифицировав код, мы получим инвертирование цветов изображения (рис. 47):

For (var i = 0; i < picLength * 4; i += 4) { myImage. data[i] = 255 — myImage. data[i]; myImage. data[i + 1] = 255 — myImage. data[i + 1]; myImage. data[i + 2] = 255 — myImage. data[i + 2]; }

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *