Canvas é realmente uma coisa mágica. Ele pode não apenas desenhar vários gráficos, textos e bitmaps, mas também realizar operações complexas de pixels e processamento em bitmaps. Portanto, coisas como filtros podem realmente ser implementadas usando o Canvas. Em seguida, é hora de testemunhar um milagre.
Primeiro, precisamos ter um contêiner Canvas, por exemplo:
<canvas id=myCanvas width=800 height=800></canvas>
A seguir, precisamos usar o Canvas para fazer um desenho:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Prepare seu próprio link de imagem img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//O primeiro 800 representa a largura da imagem desenhada e o segundo 800 representa a altura da imagem desenhada}O efeito do primeiro desenho do Canvas
O próximo passo é realizar algumas operações nos pixels da imagem. Para implementar tal operação, primeiro você precisa obter as informações de pixel da imagem do Canvas, e a obtenção dessas informações pode ser obtida por meio de getImageData() .
// ... Omitir o código anterior img.onload = (e) => {// ... Omitir o código anterior img = ctx.getImageData(0, 0, 800, 800); dados de bytes de pixel}Como o tamanho da imagem é 800*800, os pixels precisam ser percorridos para obter os valores de vermelho, verde e azul de cada pixel. portanto:
// ... Omita o código anterior img.onload = (e) => {// ... Omita o código anterior var pixelLen = 800 * 800; // Obtenha o número de pixels for(var i = 0; i; < pixelLen * 4; i += 4) { var redC = img.data[i], // A primeira unidade de byte representa vermelho greenC = img.data[i + 1], // A segunda unidade de byte representa verde blueC = img.data[i + 2], // A terceira unidade de byte representa alfa azul = img.data[i + 3] // A quarta unidade de byte representa transparência}}Através do loop acima, obtemos o valor de cor específico de cada pixel contido nos dados da imagem. Uma coisa a notar é que os dados de cada pixel não são um bit, mas quatro bits adjacentes, que representam respectivamente o vermelho, verde, azul e valores de transparência do ponto. Portanto, na verdade, o comprimento da matriz de dados de bytes de bitmap é igual ao número de pixels multiplicado por 4. No loop for, também lidamos com esse recurso de acordo.
Calculando a média dos valores de vermelho, verde e azul de cada ponto e, em seguida, atribuindo o valor médio gerado aos valores de vermelho, verde e azul do pixel, um efeito de escala de cinza pode ser formado. Finalmente, putImageData() é usado para re- Basta desenhar a imagem, o código é o seguinte:
// ... Omitir o código anterior img.onload = (e) => { // ... Omitir o código anterior for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Omita o código anterior var gray = parseInt((redC + greenC + blueC) / 3 // Obtenha o valor de cinza após calcular a média img.data[i] = grey; +1] = gray; // Altere o valor do verde img.data[i + 2] = grey; // Altere o valor do azul} ctx.putImageData(img, 0, 0, 800, 800);Neste momento, um efeito de escala de cinza será formado, conforme mostrado abaixo
O Canvas desenha a imagem pela segunda vez - efeito de escala de cinza
Para controlar a transparência, você só precisa modificar o valor correspondente à unidade do quarto byte. A faixa de valores é de 0 a 256, 0 representa transparência completa e 256 representa opacidade completa. Por exemplo:
// ... Omitir o código anterior img.onload = (e) => { // ... Omitir o código anterior for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Omitir o código anterior img.data[i + 3] = 128; // Transparência 50% } // ... Omitir o código anterior }Efeito do terceiro desenho da tela - aumenta a transparência
A partir disso, controlando o valor de 4 dados para cada pixel da imagem, o efeito do filtro pode ser alcançado. Não é tão fácil!
Referências:
"Conhecimento básico de HTML5, tecnologias essenciais e casos de ponta" editado por Liu Huan
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.