Como manipular pixels com a tag html5 canvas

Com HTML5, você pode extrair os dados de um tela de pintura marcar para os dados de pixels subjacentes. Manipular esses dados permite um amplo controle de sua imagem em tempo real. Você pode usar esses dados para balanceamento de cor, 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 o quanto o vermelho é no ponto atual, G significa verde, e B representa azul. A A representa 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:

 função sorteio () {var desenho = document.getElementById ("desenhando") Con -var = drawing.getContext ("2d") -var originais = document.getElementById ("original") -CANV_WIDTH = 200 CANV_HEIGHT = 200 - // desenha o original no canvascon.drawImage (original, 0, 0) - // obter a imagem dataimgData = con.getImageData (0, 0, 200, 200) - // laço através datafor imagem (linha = 0- fileira lt; linha CANV_HEIGHT- ++) {para (col = 0- col lt; col CANV_WIDTH- ++) {// encontrar corrente pixelindex = (col + (* fileira imgData.width)) * 4 - // separar em cor valuesr = imgData.data [índice] -g = imgData.data [índice de + 1] - b = imgData.data [índice + 2] -a = imgData.data [índice + 3] - // manipular valuesr cor - = 20-g + = 50-b - = 30-a = a - // gerir conditionsif limite (r gt; 255) {r = 255-} se (r lt; 0) {r = 0-} se (g gt; 255) {g = 255-} se (g lt; 0) {g = 0-} if (b gt; 255) {r = 255-} if (b lt; 0) {b = 0-} se (a gt; 255) {a = 255-} se (a lt; 0) {a = 0 -} // retornar novos valores para dataimgData.data [index] = r-imgData.data [índice de + 1] = g-imgData.data [índice + 2] = b-imgData.data [índice 3] = a-} // col final loop} // fileira final de ciclo // desenhar nova imagem para canvascon.putImageData (imgData, 0, 0) -} // função extremidade

Enquanto a listagem de código parece bastante longo, 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 para iterar através das linhas.

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

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

5. 
   
   
   

   Encontrar o índice em imageData para a linha corrente e da 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 é 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. Retire os valores de cor correspondentes a partir do índice.

   O índice também representa o valor vermelho do pixel atual. Nas próximas int mantém o valor verde, seguido pelo 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 matriz.

   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.