Урок - Дополнительные возможности.

Главная » Курсы » Курс HTML5 Canvas » Урок - Дополнительные возможности.

Обучающий онлайн курс
HTML5 Canvas

Лицензия: Копирование запрещено.

Манипуляции над пикселями. Введение.

2D Context API предоставляет три метода, которые позволяют выполнять попиксельное рисование:

  • createImageData() - создание объекта ImageData
  • getImageData() - попиксельное получение изображения в объекта ImageData
  • putImageData() - попиксельное рисование объекта ImageData

Пиксели хранятся в объектах типа ImageData. Каждый объект имеет три свойства: width, height и data. Свойство data имеет тип CanvasPixelArray и содержит массив элементов размером width*height*4 байт; это означает, что каждый пиксель содержит цвет в формате RGBA. Пиксели упорядочены слева направо, сверху вниз, построчно.

Чтобы лучше понять этот механизм, рассмотрим пример отрисовки блока из красных пикселей.

try{
	var ctx1 = document.getElementById('Example1').getContext('2d');
	// Создадим объект ImageData.
	var imgData = ctx1.createImageData(50,50);
	//	массив информации о цветах
	var pix = imgData.data;
	// Для всех пикселей создадим полупрозрачный красный цвет
	for (var i = 0; n = pix.length, i < n; i += 4) {
		//	крассный цвет
		pix[i] = 255;
		//	канал прозрачности
		pix[i+3] = 127;
	}
	// рисуем в заданных координатах (x,y).
	ctx1.putImageData(imgData, 0, 0);	
}
catch(err){
	alert('Ошибка');
}
Результат
Обновите браузер
Должно выглядеть так
Пока не все современные браузеры реализуют метод createImageData(). В таких браузерах необходимо получать объект ImageData(), используя метод getImageData().

getImageData() - попиксельное получение изображения в объекта ImageData

createImageData() - попиксельное получение изображения в объекта ImageData

putImageData() - попиксельное рисование объекта ImageData

Примереры манипуляций.

Благодаря возможностям метода ImageData() можно сделать очень многое. Например, можно наложить эффект на изображение, или создать графики.

Инвертирование изображения

Результат
Обновите браузер
Должно выглядеть так

Разберем код примера.

function exampleInvert(){
	//	создаем элемент изображения и указываем урл картинки
	var imgInvert = new Image();
	imgInvert.src = 'exampleInvert.png';
	//	отрисовываем изображение, после того как браузер загрузит изображение
	imgInvert.onload = function() {
		//	оператор try..catch используем для обработки ошибок, например если холст не найден
		//	в некоторых случах было замечено ошибочный вызов исключений при получении холста
		try{
			//	получаем контент холста
			var ctxInvert = document.getElementById('ExampleInvert').getContext('2d');
			// Рисуем изображение от точки с координатами 0, 0
			ctxInvert.drawImage(imgInvert, 0, 0);
			// Получить массив типа CanvasPixelArray по заданным координатам и размерам.
			var imgData = ctxInvert.getImageData(0, 0, 200, 200);
			var pix = imgData.data;
			// Обойти все пиксели изображения и инвертировать цвет.
			for (var i = 0, n = pix.length; i < n; i += 4) {
				// красный канал
				pix[i] = 255 - pix[i];
				// зеленый канал
				pix[i+1] = 255 - pix[i+1];
				// синий канал
				pix[i+2] = 255 - pix[i+2];
				// i+3 - номер элемента, содержащий альфа канал
			}			
			// Отрисовать объект ImageData в заданных координатах (x,y).
			ctxInvert.putImageData(imgData, 0, 200);
		}
		catch(err){
			//	выводим необходимую ошибку
			alert("Ошибка");
		}
	}
}
$(exampleInvert);

Дополнительные свойства

  • width - ширина канвы
  • height - высота канвы
*/ ?>