За каждый пиксель!
Ну хватит мучить кошек. Но, не отходя далеко от операций с готовыми изображениями, стоит рассмотреть, как 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]; }
Добавить комментарий