Como manipular Pixels com a Tag HTML5 Canvas

Com HTML5, você pode extrair os dados de um lona tag para os dados de pixel subjacentes. Manipular esses dados permite um amplo controle de sua imagem em tempo real. Você pode usar esses dados para balanceamento de cores, bem como para experimentar com seus próprios borrões, aguça e efeitos chroma-key.

Não importa o formato de uma imagem é armazenada em no sistema de arquivos, ele será exibido como uma lista de pixels. Cada pixel é representado (no sistema de 32-bit padrão, de qualquer maneira) por quatro inteiros: RGBA. O R representa quanto vermelha está no ponto atual, G significa verde, e B representa azul. O A significa alfa, que é uma medida da transparência da imagem. Cada um desses valores pode variar de 0 a 255. Quando você converter uma imagem para o formato de dados de imagem, você tem uma enorme variedade de números inteiros. Cada grupo de quatro imagens representa um único pixel de dados de cor.

Este código muda o equilíbrio de cores de uma imagem:

 draw function () {var desenho = document.getElementById ( "desenho") - var con = drawing.getContext ( "2d") - var originais = document.getElementById ( "original") - CANV_WIDTH = 200 CANV_HEIGHT = 200- / / desenhar o original no canvascon.drawImage (original, 0, 0) - // obter a imagem dataimgData = con.getImageData (0, 0, 200, 200) - // loop através de imagem datafor (linha = 0- linha lt; linha CANV_HEIGHT- ++) {for (col = 0- col lt; col CANV_WIDTH- ++) {// encontrar atual pixelindex = (col + (linha * imgData.width)) * 4 - // separar em cor valuesr = imgData.data [índice] -g = imgData.data [index + 1] - b = imgData.data [index + 2] -a = imgData.data [index + 3] - // manipular valuesr cor - = 20-g + = 50-b - = 30-a = a - // gerenciar conditionsif fronteira (r> 255) = 255- {R} se (R lt; 0) {R} = 0- Se (g> 255) = 255- {g} se (g lt; 0) {G = 0-} if (b> 255) = 255- {R} if (b lt; 0) {b = 0-} if (a> 255) {a = 255-} if (a lt; 0) {a = 0 -} // retorna novos valores a dataimgData.data [índice] = r-imgData.data [index 1 +] = g-imgData.data = b-imgData.data [index [índice + 2] 3] = a-} // col final loop} // linha final loop for // desenha nova imagem para canvascon.putImageData (imgData, 0, 0) -} // função de final

Enquanto a listagem de código parece bastante longa, ele realmente não é muito difícil de seguir:

1. Desenhar uma imagem original.

   A técnica que você vai usar extrai dados a partir de um elemento de tela, de modo a modificar uma imagem, você primeiro precisa desenhá-la em uma lona. Você pode usar o comum drawImage () método.

2. Extrair os dados de imagem.

   o getImageData () método obtém a imagem exibida pela tela atual e coloca-lo em uma enorme variedade de números inteiros.

3. Faça um laço para lidar com as linhas.

   Os dados de imagem é dividida em linhas e colunas. Cada linha vai de 0 a altura da tela, por isso fazer uma para loop for para percorrer as linhas.

4. Faça outro loop para lidar com as colunas.

   Dentro de cada linha há dados suficientes para ir de 0 a largura da tela, então faça um segundo loop for dentro do primeiro. É muito comum o uso de um par de aninhada para loops para percorrer os dados bidimensionais como a informação da imagem.

5. Encontrar o índice em imageData para a linha atual e coluna.

   o imageData matriz contém quatro inteiros para cada pixel, por isso temos de fazer um pouco de matemática para descobrir onde o primeiro inteiro para cada pixel é. A fórmula mais fácil é para multiplicar o número da linha pela largura da tela, acrescentar que para o número da coluna, e multiplicar o resultado completo por quatro.

6. Puxe os valores de cores correspondentes do índice.

   O índice também representa o valor vermelho do pixel atual. Nas próximas int mantém o valor de verde, seguidas por o valor azul, e finalmente o valor alfa.

7. Manipular os valores de cor que você quiser.

   Se você estiver indo para fazer um aplicativo de balanceamento de cor, você pode simplesmente adicionar ou subtrair valores para alterar o equilíbrio geral de cores. Você também pode fazer o trabalho muito mais elaborado, se você quiser brincar com manipulação de imagem em nível de pixel.

8. Verifique se há limites.

   Um valor de pixel não pode ser inferior a 0 ou superior a 255, de modo a verificar para ambos os limites e ajustar todos os valores de pixel para estar dentro dos limites legais.

9. Retornar valores manipulados de volta para o imgData array.

   Você pode copiar valores de volta para a matriz, e você deve fazê-lo para fazer as alterações visíveis.

10. Desenhe os dados de imagem de volta para a tela.

    o putImageData () função desenha os dados atuais da imagem de volta para a tela como uma imagem comum. A nova versão da imagem refletirá as alterações.