HTML5 Processamento de pixels do Canvas

HTML5 Método de uso da função createImageData() para processamento de pixels do Canvas, demonstração em tempo real de processamento de pixels do Canvas, como copiar pixels para o canvas, definição gramatical e detalhes dos valores de atributos, etc.

可以访问HTML5é possível acessar HTML

pixels de cada canvas. Você pode usar o objeto ImageData para fazer isso. O objeto ImageData contém um array de pixels. Através da acesso a este array, você pode manipular pixels. Após a manipulação dos pixels, é necessário copiar os pixels para o canvas para exibi-los.

Criar um objeto ImageData2Criar um objeto ImageData é feito usando

Dfunção de contexto DcreateImageData(). Este é um exemplo:1var canvas = document.getElementById("ex
");2var context = canvas.getContext("
var width =　100;
var height =　100;
d");

var imageData = context.createImageData(width, height);100 x 10objeto de área de 0 pixels. A função createImageData() define os atributos width e height do objeto ImageData, que representam a largura e a altura da área de pixels que o ImageData cria. No exemplo acima, foi criado um ImageData com

Atributos ImageData

O objeto ImageData possui três atributos:

• width

• height

• data

Os atributos width e height contêm a largura e a altura da área de dados da imagem.
O atributo data é um array de bytes que contém os valores dos pixels.

processamento de pixel

　cada pixel no array data contém4valores de 1 byte. Vermelho, verde e azul compõem um valor, enquanto o canal alpha compõe outro valor. A cor do pixel é determinada pela mistura dos valores de vermelho, verde e azul para formar a cor final. O canal alpha descreve a transparência do pixel. Cada um dos valores de vermelho, verde, azul e alpha pode ser de 0 a255entre os valores.
Este é um exemplo de código para definir a cor e o valor Alpha do primeiro pixel:

var pixelIndex = 0;
imageData.data[pixelIndex               ] =　255;　　//　cor vermelha
imageData.data[pixelIndex　+　1] =               0;　　//　cor verde
imageData.data[pixelIndex　+　2] =               0;　　//　cor azul
imageData.data[pixelIndex　+　3] =　255;

Use o seguinte código para ler valores de pixel:

var pixelIndex = 0;
var vermelha = imageData.data[pixelIndex               ];　　//　cor vermelha
var verde = imageData.data[pixelIndex　+　1];　　//　cor verde
var blue = imageData.data[pixelIndex　+　2];　　//　cor azul
var alpha = imageData.data[pixelIndex　+　3];

Para acessar o valor pixelIndex do próximo pixel, aumente seu valor4Cada pixel é composto por4composta por um número de elementos de array, como mostrado acima).
Você pode calcular o índice do pixel dado da seguinte forma:

　var index =　4　*　(x　+　y　*　);

Os x e y no cálculo são calculados como índices de pixels x e y. Os pixels são organizados em uma sequência longa de pixels, começando pelo pixel superior esquerdo, se movendo verticalmente para a direita. Quando chega ao final da linha, a sequência de pixels continua do pixel mais à esquerda da linha inferior. Portanto, para calcular o índice do pixel localizado em x, você precisa multiplicar a coordenada y pelo número de pixels por linha e adicionar o valor de x.
Este é um exemplo20 pixels de largura e8A imagem da grade de pixels ImageData de altura de pixels. Na margem direita estão listados os índices de cada linha de pixels. Como você pode ver, a enumeração dos índices começa no canto superior esquerdo com 0 e aumenta para a direita. Quando chega ao limite da linha, a enumeração continua do pixel mais à esquerda da linha inferior e continua para a direita.

para copiar pixels para a tela

Após o processamento dos pixels, você pode usar2A função D context tem duas versões de putImageData(). A primeira versão da função putImageData() copia todos os pixels para a tela. Este é um exemplo:

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

Os parâmetros canvasX e canvasY são as coordenadas x e y onde os pixels são inseridos na tela.
A segunda versão da função putImageData() pode copiar um retângulo de pixels ao invés de todos os pixels para a tela. Este é um exemplo de código:

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

Os parâmetros sx e sy (sourceX e sourceY) são as coordenadas x e y do canto superior esquerdo do retângulo, copiados a partir do array de pixels.
Os parâmetros sWidth e sHeight (sourceWidth e sourceHeight) são a largura e a altura do retângulo, respectivamente, que são copiados do array de pixels.

Obter pixels do canvas

Também é possível capturar um retângulo de pixel do canvas em um objeto ImageData. Isso é feito usando a função getImageData(). Aqui está um exemplo:

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　= context.getImageData(x, y, width, height);

Os parâmetros x e y são as coordenadas do canto superior esquerdo do retângulo do canvas.
Os parâmetros width e height são os tamanhos da retângulo do canvas, respectivamente a largura e a altura.