Introducción a la interfaz para usar el procesamiento de píxeles de lona HTML5

Resumen del contenido: este artículo muestra la interfaz común del lienzo en la operación de datos de píxeles de imagen a través de ejemplos de código simples y demostraciones ligeramente obscenas. En cuanto a cómo usar estas interfaces para lograr efectos más complejos, continuará siendo discutido en capítulos posteriores.

1. Llenado de imagen de lienzo; 2. Establecer/obtener datos de imagen de lienzo; 3. Crear datos de imagen de lienzo; 4. Un pequeño suplemento a imagedata.data; 5. Escríbalo más tarde

/**

* @descripción

* @param {número} x La distancia desde el punto más izquierdo del punto de dibujo inicial de la imagen desde el lienzo

* @param {número} y la distancia entre el punto de partida del dibujo de la imagen desde la parte superior del lienzo

* @param {número} ancho El ancho de la imagen final dibujada en lienzo

* @param {número} altura la altura de la imagen final dibujada en lienzo

*/

context.drawimage (imagen, x, y, ancho, altura)

demo_01 es el siguiente:

<Canvas ID = draw_image_canvas style = fondo: #ccc;> </lienvas>

función $ (id) {return document.getElementById (id); }

función getImage (url, devolución de llamada) {

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

img.onload = function () {

Callback && Callback (this);

};

img.src = url;

document.body.appendChild (IMG);

}

función drawImage () {

var url = 'xiangjishi.png';

var lienvas = $ ('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 drawheight = img.Height/4;

context.DrawImage (img, offsetX, offsety, DrawWidth, Drawheight);

});

}

drawImage ();

Descripción de la demostración: Load xiangjishi.png. Después de cargar, dibuje xiangjishi.png en el lienzo a partir de las coordenadas (0, 0) en relación con la esquina superior izquierda del lienzo. El efecto es el siguiente:

Al ver esto, es posible que no entienda el significado de los cuatro parámetros en el contexto. Drawimage (imagen, x, y, ancho, altura) todavía. Simplemente puede modificar algunos parámetros para ver el efecto:

var offsetX = 20;

var offsety = 20;

var drawwidth = img.width/2;

var drawheight = img.Height/2;

context.DrawImage (img, offsetX, offsety, DrawWidth, Drawheight);

El efecto de demostración modificado es el siguiente. Combinado con la descripción de la API anterior, no debe ser difícil comprender el significado de los cuatro parámetros.

context.drawimage (imagen, x, y, ancho, altura)

/**

* @Description Obtenga información de píxeles para un área específica de lienzo

* @param {número} x La distancia desde el punto más izquierdo de la información para obtener la distancia del lienzo

* @param {número} y la distancia de inicio desde la parte superior del lienzo para obtener información

* @param {número} ancho el ancho obtenido

* @param {número} altura la altura final

*/

context.getImagedata (x, y, ancho, altura)

Este método devuelve un objeto iMagedata, que tiene tres propiedades principales:

imagedata.Width: ¿Cuántos elementos hay por línea?

imagedata.Height: ¿Cuántos elementos hay por columna?

imagedata.data: matriz unidimensional que almacena el valor RGBA de cada píxel obtenido del lienzo. Esta matriz guarda cuatro valores para cada píxel: transparencia roja, verde, azul y alfa. Cada valor está entre 0 y 255. Por lo tanto, cada píxel en lienzo se convierte en cuatro valores enteros en esta matriz. El orden de llenado de la matriz es de izquierda a derecha, de arriba a abajo.

/**

* @description Establece la información de píxeles de un área específica con un imagedata específico

* @param {número} x Comience a configurar desde el punto x del lienzo

* @param {número} y Comience a configurar desde el punto Y del lienzo

* @param {número} ancho el ancho obtenido

* @param {número} altura la altura final

*/

context.putimagedata (imagedata, x, y)

Lo siguiente es combinar demo_2 para explicar el uso de getimagedata () y el significado correspondiente de cada parámetro

El código fuente de Demo_02 es el siguiente, y se modifica ligeramente en función de Demo_01:

<Canvas id = "draw_image_canvas" style = "Fondo: #cc;"> </Canvas>

<Canvas id = "get_image_canvas" style = "fondo: #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);

// Obtener información de píxeles

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);

// Establecer información de píxeles, ignore el código específico aquí primero, sepa que la información de píxel obtenida anteriormente se coloca en otro lienzo intacto

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);

});

}

En este punto, el significado correspondiente a los cuatro parámetros del método GetImagedata se puede borrar básicamente. No es difícil entender los parámetros de Putimagedata. Después de modificar ligeramente el código de demo_2, lo sabrá después de mirar el efecto.

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);

// Obtener información de píxeles

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);

// establecer información de píxeles

var startx = img.width/2; // Esto fue originalmente 0

var starty = img.width/2; // Esto fue originalmente 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);

});

}

El efecto de visualización Demo_3 es el siguiente, pero si intenta cambiar algunos parámetros usted mismo, puede tener una mejor comprensión:

/**

* @Description Pre-cree un conjunto de datos de imagen y los une al objeto Canvas

* @param {número} ancho creado por ancho

* @param {número} altura creada de altura

*/

context.createImagedata (ancho, altura)

La interfaz es relativamente simple, y los datos creados pueden procesarse igual que los datos obtenidos con getImagedata. Solo debe tenerse en cuenta aquí que este conjunto de datos de imagen puede no reflejar necesariamente el estado actual del lienzo.

Además, en "programación avanzada HTML5" y muchos artículos, iMagedata.Data se considera una matriz, pero de hecho:

imagedata.data no devuelve una matriz real, sino un objeto de matriz de clases, que puede imprimir el tipo de imagedata.data.

console.log (object.prototype.tostring.call (imgagedata.data)); // Salida: [Object Uint8ClampedArray]

Luego imprima el contenido específico de imagedata.data. El contenido es largo. Solo se pueden ver los primeros y últimos párrafos:

imagedata.data es en realidad un objeto cuyo índice comienza desde 0 y termina hasta el ancho*altura*4-1.

¿Por qué no almacenarlo directamente en matrices? Debido a que la longitud de la matriz tiene un límite superior, suponiendo que sea limitada, los elementos que exceden la longitud limitada se almacenan en valores clave. Por ejemplo, los datos [LimitLength + 100] son ​​en realidad datos ['LimitLength + 100 +' '] (no recuerdo el valor específico de LimitLength, si está interesado, puede verificarlo)

En cuanto a la longitud de bytel, el byteoffset y las propiedades del amortiguador al final, no hemos investigado en profundidad, y no la expandiremos aquí para evitar lectores engañosos.

Nivel limitado, señale si hay algún error