Введение в интерфейс для использования обработки пикселей HTML5 Canvas

Сводка содержимого: в этой статье показан общий интерфейс холста в операции данных Pixel с помощью простых примеров кода и слегка непристойных демонстраций изображения. Что касается того, как использовать эти интерфейсы для достижения более сложных эффектов, это будет продолжать обсуждаться в последующих главах.

1. наполнение изображения холста; 2. Установить/получить данные изображения холста; 3. Создать данные изображения холста; 4. Маленькая добавка к iMagedata.data; 5. Напишите позже

/**

* @описание

* @param {number} x расстояние от самой левой точки начального рисунка изображения из Canvas

* @param {number} y расстояние между начальной точкой рисунка изображения с верхней части холста

* @param {number} ширина ширина конечного изображения, нарисованного на Canvas

* @param {номер} Высота высота конечного изображения, нарисованного на холсте.

*/

context.drawimage (изображение, x, y, ширина, высота)

DEMO_01 выглядит следующим образом:

<canvas id = draw_image_canvas style = foureny: #ccc;> </canvas>

Функция $ (id) {return document.getElementByid (id); }

функция GetImage (url, обратный вызов) {

var img = document.createElement ('img');

img.onload = function () {

Callback && Callback (this);

};

img.src = url;

document.body.appendchild (img);

}

функция trailImage () {

var url = 'xiangjishi.png';

var canvas = $ ('draw_image_canvas');

var context = canvas.getContext ('2d');

getImage (url, function (img) {

canvas.width = img.width;

Canvas.height = img.height;

var offsetx = 20;

var offsety = 20;

var drawwidth = img.width/4;

var draitheight = img.height/4;

context.drawimage (img, offsetx, offsety, drawwidth, drawheight);

});

}

DraitImage ();

Демо -описание: загрузить xiangjishi.png. После загрузки нарисуйте Sianjjishi.png на холсте, начиная с координат (0, 0) относительно верхнего левого уголка холста. Эффект заключается в следующем:

Видя это, вы можете не понять значение четырех параметров в контексте. РАВИМАЖ (Изображение, X, Y, ширина, высота). Вы можете просто изменить несколько параметров, чтобы увидеть эффект:

var offsetx = 20;

var offsety = 20;

var drawwidth = img.width/2;

var drailheight = img.height/2;

context.drawimage (img, offsetx, offsety, drawwidth, drawheight);

Модифицированный демонстрационный эффект заключается в следующем. В сочетании с вышеупомянутым описанием API не должно быть трудно понять значение четырех параметров.

context.drawimage (изображение, x, y, ширина, высота)

/**

* @description Получите информацию о пикселях для определенной области холста

* @param {номер} x На расстоянии от самой левой точки информации, чтобы получить расстояние от холста

* @param {number} y Начальное расстояние от верхней части холста для получения информации

* @param {number} ширина ширина получена

* @param {номер} высота конечная высота

*/

context.getimagedata (x, y, ширина, высота)

Этот метод возвращает объект ImageData, который имеет три основных свойства:

IMAGEDATA.Width: сколько элементов там на строку

Imagedata.Height: сколько элементов там на колонку

IMAGEDATA.Data: одномерный массив, в котором хранится значение RGBA каждого пикселя, полученное с холста. Этот массив сохраняет четыре значения для каждого пикселя - красный, зеленый, синий и альфа -прозрачность. Каждое значение составляет от 0 до 255. Следовательно, каждый пиксель на холсте становится четырьмя целочисленными значениями в этом массиве. Порядок наполнения массива слева направо, сверху вниз.

/**

* @description Установите информацию о пикселе конкретной области с определенным Imagedata

* @param {number} x Настройка начала из точки X Canvas

* @param {number} y начало настройки из точки y canvas

* @param {number} ширина ширина получена

* @param {номер} высота конечная высота

*/

context.putimagedata (imagedata, x, y)

Следующее заключается в объединении Demo_2, чтобы объяснить использование GetImagedata () и соответствующее значение каждого параметра

Исходный код DEMO_02 выглядит следующим образом, и он немного изменен на основе DEMO_01:

<canvas id = "draw_image_canvas" style = "founal: #cc;"> </canvas>

<canvas id = "get_image_canvas" style = "founal: #cc;"> </canvas>

function getandSetimagedata () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). Height = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

context.drawimage (img, 0, 0, img.width, img.height);

// Получить информацию пикселя

var offsetx = img.width/2;

var offsety = img.height/2;

var getimgwidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getimagedata (offsetx, offsety, getimgwidth, getimgheight);

// Установить информацию о пикселях, сначала не обращайте внимания на конкретный код, знайте, что информация о пикселе, полученная выше, помещается в другой холст неповрежден

var startx = 0;

var starty = 0;

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). Height = img.height;

ct.putimagedata (imgagedata, startx, starty);

});

}

На этом этапе значение, соответствующее четырем параметрам метода Getimagedata, может быть в основном очищено. Нетрудно понять параметры Putimagedata. После небольшого изменения кода DEMO_2 вы узнаете об этом после рассмотрения эффекта.

function getandSetimagedata () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). Height = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

context.drawimage (img, 0, 0, img.width, img.height);

// Получить информацию пикселя

var offsetx = img.width/2;

var offsety = img.height/2;

var getimgwidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getimagedata (offsetx, offsety, getimgwidth, getimgheight);

// Установить информацию пикселя

var startx = img.width/2; // это было изначально 0

var starty = img.width/2; // это было изначально 0

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). Height = img.height;

ct.putimagedata (imgagedata, startx, starty);

});

}

Эффект отображения DEMO_3 выглядит следующим образом, но если вы попытаетесь изменить несколько параметров самостоятельно, у вас может быть лучшее понимание:

/**

* @description Предварительно создать набор данных изображения и привязать его с объектом Canvas

* @param {number} ширина, созданная шириной

* @param {number} высота создана высота

*/

Context.createimagedata (ширина, высота)

Интерфейс относительно прост, и созданные данные могут быть обработаны так же, как и данные, полученные с помощью Getimagedata. Здесь нужно только отметить, что этот набор данных изображения не обязательно отражать текущее состояние холста.

Кроме того, в «HTML5 Advanced Programming» и многих статьях Imagedata.Data рассматривается как массив, но на самом деле:

Imagedata.Data возвращает не настоящий массив, а объект массива классов, который может распечатать тип ImageData.Data.

console.log (object.prototype.tostring.call (imgagedata.data)); // Вывод: [Object uint8clampedArray]

Затем распечатайте конкретное содержание ImageData.data. Содержание длинное. Можно увидеть только первые и последние абзацы:

Imagedata.Data на самом деле является объектом, индекс которого начинается с 0 и заканчивается шириной*высота*4-1.

Почему бы не хранить его непосредственно в массивах? Поскольку длина массива имеет верхний предел, предполагая, что он является предельной длиной, элементы, превышающие предельную длину, хранятся в значениях ключей. Например, данные [LimitLength + 100] на самом деле являются данными ['LimitLength + 100 +' '] (я не могу вспомнить конкретное значение ограничивающей длины, если вы заинтересованы, вы можете это проверить)

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

Ограниченный уровень, укажите, если есть какие -либо ошибки