Ensine como usar o Canvas para processar imagens

Canvas, traduzido como canvas em chinês, possui um novo elemento <canvas> em HTML5, que pode ser combinado com JavaScript para desenhar gráficos dinamicamente no canvas.

Hoje não falaremos sobre desenho gráfico no Canvas, mas sim como processar imagens.

O processo é provavelmente muito simples e está dividido principalmente nas três etapas a seguir:

Sim, tão fácil quanto colocar um elefante na geladeira, haha.

As principais APIs do Canvas utilizadas em todo o processo são:

1. Desenhe uma imagem: drawImage()
2. Obtenha dados de imagem: getImageData()
3. Reescreva os dados da imagem: putImageData()
4. Exportar imagem: toDataURL()

Como o nome sugere, este método é usado para desenhar imagens na tela Canvas. Existem três usos específicos:

① Posicione a imagem na tela: context.drawImage(img,x,y)

② Posicione a imagem na tela e especifique a largura e a altura da imagem: context.drawImage(img,x,y,width,height)

③ Corte a imagem e posicione a parte cortada na tela: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Os valores dos parâmetros acima estão descritos na tabela a seguir:

Este método é usado para obter dados de imagem da tela do Canvas. O uso específico é o seguinte:

Obtenha os dados de pixel dentro do intervalo retangular especificado da tela: var ImageData = context.getImageData(x,y,width,height)

Os valores dos parâmetros acima estão descritos na tabela a seguir:

Este método retornará um objeto ImageData, que possui três propriedades: largura, altura e dados. O array de dados que usamos principalmente é este, pois salva os dados de cada pixel da imagem. Depois de obter esses dados, podemos processá-los e finalmente reescrevê-los no canvas Canvas, realizando assim o processamento e conversão das imagens. Para o uso específico do array de dados, podemos ver nos exemplos a seguir.

Este método é muito simples e é usado para reescrever dados de imagem na tela do Canvas. O uso específico é o seguinte:

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Os valores dos parâmetros acima estão descritos na tabela a seguir:

Este método é diferente dos três métodos acima. É um método do objeto Canvas. Este método retorna uma string contendo o URI de dados. Esta string pode ser usada diretamente como o endereço do caminho da imagem para preencher o atributo src do <img. > tag Especificamente, o uso é o seguinte:

 var dataURL = canvas.toDataURL(type, encoderOptions);

Os valores dos parâmetros acima estão descritos na tabela a seguir:

Este exemplo apresentará brevemente como processar imagens coloridas em imagens em preto e branco por meio de código.

 <!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=processar imagens/><input id=create type=button value=gerar imagens /><div id=resultado></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //Obter o objeto de tela Canvas context = canvas.getContext('2d'); Este método de objeto var image = new Image(); //Defina um objeto de imagem image.src = 'imgs/img.jpg'; Todas as operações subsequentes devem ser realizadas após a imagem ser carregada com sucesso, caso contrário a imagem será processada inválida context.drawImage(image,0,0); canvas. O tamanho padrão é o tamanho real da imagem var handle = document.getElementById(handle); var create = document.getElementById(create); var imgData = context.getImageData(0,0,canvas.width,canvas.height); //Obter o objeto de dados da imagem var data = imgData.data; //Obter o array de dados da imagem. Representa os valores de vermelho, verde, azul e transparência respectivamente var média = 0 for (var i = 0; i < data.length; i+=4) { média = 0; Math.floor((data[i]+data[i+1]+data[i+2])/3 //Calcule a média dos valores de vermelho, verde e azul para obter os dados do valor da escala de cinza[i]); = data[i+1] = data[i+2] = média; Reescreva o valor da cor de cada pixel} imgData.data = data; //Reescreva os dados da imagem processada na tela do Canvas e a imagem na tela fica em preto e branco}; create.onclick = function(){ // Clique no botão Gerar imagem para exportar a imagem var imgSrc = canvas.toDataURL( ); //Obter o DataURL da imagem var newImg = new Image(); resultado.innerHTML = '' resultado.appendChild(newImg } };};

Talvez o código acima não esteja muito bem escrito e não pareça tão fácil de entender. É melhor escrevê-lo você mesmo, para poder entendê-lo mais profundamente.

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.