Aprendizado de tela e código de implementação de filtro

Nesta era de proliferação de produtos digitais, tirar fotos tornou-se uma parte indispensável da vida. Esteja você em casa, passeando ou viajando para longe, você sempre tirará lindas fotos. Mas as fotos tiradas diretamente pela câmera muitas vezes apresentam uma certa lacuna entre elas e nossas expectativas psicológicas. A resposta são imagens P de beleza, então todos os tipos de câmeras de beleza estão surgindo e as imagens P se tornaram uma habilidade portátil.

Na verdade, a chamada beleza é apenas o uso de muitos filtros, e os filtros usam certos algoritmos para manipular os pixels das imagens para obter alguns efeitos especiais de imagem. Amigos que usaram o Photoshop sabem que existem muitos filtros no PS. Abaixo usaremos a tecnologia js canvas para obter vários efeitos de filtro.

Recentemente aprendi o destaque do HTML5- canvas . Usando o canvas, o pessoal de front-end pode realizar facilmente o processamento de imagens. Existem muitas APIs. Desta vez, aprenderei principalmente as APIs comumente usadas e preencherei os dois códigos a seguir:

• Implementar filtro de descoloração
• Implementar filtro de cor negativa (cor reversa)

Este elemento HTML foi projetado para gráficos vetoriais do lado do cliente. Ele não tem comportamento próprio, mas expõe uma API de desenho ao JavaScript do cliente para que o script possa desenhar o que quiser em uma tela.

Uma diferença importante entre <canvas> e SVG e VML é que <canvas> possui uma API de desenho baseada em JavaScript, enquanto SVG e VML usam um documento XML para descrever o desenho.

A maior parte da API de desenho do Canvas não é definida no elemento <canvas> em si, mas é definida em um objeto de ambiente de desenho obtido por meio do método getContext() do canvas. A largura e a altura padrão do próprio elemento <canvas> são 300px e 150px, respectivamente.

 // Processa o elemento canvas var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70 // Obtenha o objeto de contexto na tag canvas especificada var ctx = c.getContext(2d; );

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Coordenada inicial ctx.lineTo(200, 100); .stroke(); // Desenha imediatamente

Para ctx.arc() , os cinco parâmetros são: (x,y,r,start,stop) . Entre eles, xey são as coordenadas do centro do círculo e r é o raio.

As unidades de start e stop são radianos . Nem comprimento, nem graus.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. AVC();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

Em relação às APIs de processamento de imagens, existem principalmente quatro:

Desenhe uma imagem: drawImage(img,x,y,width,height) ou drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Obtenha dados de imagem: getImageData(x,y,width,height)

Reescreva os dados da imagem: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Exportar imagem: toDataURL([type, encoderOptions])

Para obter descrições mais detalhadas da API e dos parâmetros, consulte: Explicação dos parâmetros da API de processamento de imagens do Canvas

Com base nessas APIs, podemos desenhar nossas imagens no elemento canvas . Suponha que nossa imagem seja ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Declara um novo objeto de imagem img.src = ./img/photo.jpg // Após o carregamento da imagem img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // De acordo com o tamanho da imagem, especifique o tamanho da tela canvas.width = img.width canvas.height = img.height // Desenha a imagem ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

Conforme mostrado na figura abaixo, a imagem é desenhada na tela:

Aqui pegamos emprestada principalmente a função getImageData , que retorna o valor RGBA de cada pixel. Com a ajuda de fórmulas de processamento de imagem, você pode manipular pixels para realizar operações matemáticas correspondentes.

O efeito de remoção de cor é equivalente às fotos em preto e branco tiradas por câmeras antigas. Com base na sensibilidade do olho humano, as pessoas deram a seguinte fórmula:

gray = red * 0.3 + green * 0.59 + blue * 0.11

O código é o seguinte:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Inicia o processamento do filtro var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); comprimento / 4; ++i) { var vermelho = imgData.data[i * 4], verde = imgData.data[i * 4 + 1], azul = imgData.data[i * 4 + 2]; var grey = 0,3 * red + 0,59 * green + 0,11 * blue; // Calcular cinza // Atualizar RGB, nota: // imgData.data[i * 4 + 3] é armazenado é alfa, não há necessidade de alterar imgData.data[i * 4] = grey; 4 + 2] = cinza } ctx.putImageData(imgData, 0, 0); // Reescrever os dados da imagem} }</script>

O efeito é mostrado abaixo:

4.2 Efeito de cor negativa

O efeito de cor negativo consiste em subtrair o valor atual do valor máximo. O valor numérico máximo teórico em RGB obtido por getImageData é: 255. Então, a fórmula é a seguinte:

new_val = 255 - val

O código é o seguinte:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Inicia o processamento do filtro var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); comprimento / 4; ++i) { var vermelho = imgData.data[i * 4], verde = imgData.data[i * 4 + 1], azul = imgData.data[i * 4 + 2]; // Atualizar RGB, nota: // imgData.data[i * 4 + 3] armazena alfa, não há necessidade de alterar imgData.data[i * 4] = 255 - imgData . dados[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0); // Reescrever os dados da imagem} }</script>

As renderizações são as seguintes:

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.