Introdução ~ Filtro do Instagram criado com JavaScript

Introdução ~ Filtro do Instagram criado com JavaScript

Um dia, eu estava aprendendo o canvas do protocolo HTML5 apenas para me divertir. De repente, uma ideia interessante me ocorreu. “Que tal criar filtros de aprimoramento de imagem no Instagram ou no twitte com canvas e js?” . Logo depois comecei a criar esses filtros com HTML5 / CSS3 / JS, com um monte de balanços e rotundas. Este post é para apresentar como criei o filtro e o que aprendi com o trabalho divertido no fim de semana.

Pessoalmente, o filtro ainda não foi imitado com perfeição, então agradeço seus conselhos ou comentários.

Github

<a href=” https://github.com/KENJU/instagram_js_filter”>! [screenshot.png] (https://qiita-image-store.s3.amazonaws.com/0/48264/bf9dc83e-5ede-07a3 -964a-272882ee0e66.png “Captura de tela”) </a>

Extraia pixels de imagens com tela

Com e , você pode extrair pixels da imagem como os códigos abaixo. Esta é a primeira etapa para criar filtros.getContext('2d')getImageDate()

• HTMLCanvasElement.getContext ()
• CanvasRenderingContext2D.getImageData ()

Filter.canvas.getPixels = function(img) {
  var canvas,
      context
  ;
  canvas = Filter.canvas.getCanvas(img.width, img.height);
  context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  return context.getImageData(0, 0, canvas.width, canvas.height);
};

Os efeitos da escala de cinza, sépia e espelhamento eram fáceis

Como retorno de , você pode obter uma matriz composta de dados RGB + Alpha de cada pixel.context.getImageData()

var pixels = 
  [ 15, 16, 28, 255, // Red, Green, Blue, Alpha of 1st pixel
    22, 51, 59, 255, // Red, Green, Blue, Alpha of 2nd pixel
    33, 55, 59, 255, // Red, Green, Blue, Alpha of 3rd pixel
    ...
  ];

Portanto, se você converter esses dados RGB + Alpha, poderá criar uma nova imagem com efeitos interessantes da seguinte maneira.

Exemplo 1: escala de cinza

Taggedcanvashtml5javascript