Introdução
O elemento de tela HTML5 pode ser usado para criar filtros de imagem. O que você precisa fazer é desenhar uma imagem em uma tela, ler os pixels da tela e executar o filtro neles. Você pode escrever o resultado em uma nova tela (ou simplesmente reutilizar a antiga).
Parece simples? Bom. Vamos arrebenta
Processando pixels
Primeiro, recupere os pixels da imagem:
Filters = {};
Filters.getPixels = function(img) {
var c = this.getCanvas(img.width, img.height);
var ctx = c.getContext('2d');
ctx.drawImage(img);
return ctx.getImageData(0,0,c.width,c.height);
};
Filters.getCanvas = function(w,h) {
var c = document.createElement('canvas');
c.width = w;
c.height = h;
return c;
};
Em seguida, precisamos de uma maneira de filtrar imagens. Que tal um método filterImage
que usa um filtro e uma imagem e retorna os pixels filtrados?
Filters.filterImage = function(filter, image, var_args) {
var args = [this.getPixels(image)];
for (var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
return filter.apply(null, args);
};
Como executar filtros simples
Agora que montamos o pipeline de processamento de pixels, é hora de criar alguns filtros simples. Para começar, vamos converter a imagem para escala de cinza.
Filters.grayscale = function(pixels, args) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
Você pode ajustar o brilho adicionando um valor fixo aos pixels:
Filters.brightness = function(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
};
Limitar uma imagem também é bastante simples. Basta comparar o valor da escala de cinza de um pixel com o valor do limite e definir a cor com base nisso:
Filters.threshold = function(pixels, threshold) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
var v = (0.2126*r + 0.7152*g + 0.0722*b >= threshold) ? 255 : 0;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
Imagens em movimento
Os filtros de convolução são filtros genéricos muito úteis para processamento de imagens. A ideia básica é que você pegue a soma ponderada de um retângulo de pixels da imagem de origem e a use como o valor de saída. Os filtros de convolução podem ser usados para desfoque, nitidez, estampa, detecção de borda e muito mais.
Filters.tmpCanvas = document.createElement('canvas');
Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
Filters.createImageData = function(w,h) {
return this.tmpCtx.createImageData(w,h);
};
Filters.convolute = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
// pad output by the convolution matrix
var w = sw;
var h = sh;
var output = Filters.createImageData(w, h);
var dst = output.data;
// go through the destination image pixels
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
// calculate the weighed sum of the source image pixels that
// fall under the convolution matrix
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = sy + cy - halfSide;
var scx = sx + cx - halfSide;
if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};
Aqui está um filtro de nitidez de 3x3. Observe como o peso é concentrado no pixel central. Para manter o brilho da imagem, a soma dos valores da matriz precisa ser um.
Filters.filterImage(Filters.convolute, image,
[ 0, -1, 0,
-1, 5, -1,
0, -1, 0 ]
);
Veja outro exemplo de um filtro de convolução, o desfoque de caixa. O desfoque de caixa gera a média dos valores de pixel dentro da matriz de convolução. Isso é feito criando uma matriz de convolução de tamanho NxN, em que cada um dos pesos é 1 / (NxN). Dessa forma, cada um dos pixels dentro da matriz contribui com a mesma quantia para a imagem de saída, e a soma dos pesos é um.
Filters.filterImage(Filters.convolute, image,
[ 1/9, 1/9, 1/9,
1/9, 1/9, 1/9,
1/9, 1/9, 1/9 ]
);
É possível combinar filtros de imagem mais complexos combinando os atuais. Por exemplo, vamos criar um filtro Sobel. Um filtro Sobel calcula os gradientes verticais e horizontais da imagem e combina as imagens calculadas para encontrar as bordas delas. Para implementar o filtro Sobel, primeiro dimensionamos a imagem de cinza, em seguida, pegamos os gradientes horizontal e vertical e, por fim, combinamos as imagens de gradiente para compor a imagem final.
Em relação à terminologia, "gradiente" significa a alteração no valor do pixel em uma posição da imagem. Se um pixel tiver um vizinho à esquerda com valor 20 e um vizinho direito com valor 50, o gradiente horizontal no pixel será de 30. O gradiente vertical tem a mesma ideia, mas usa os vizinhos acima e abaixo.
var grayscale = Filters.filterImage(Filter.grayscale, image);
// Note that ImageData values are clamped between 0 and 255, so we need
// to use a Float32Array for the gradient values because they
// range between -255 and 255.
var vertical = Filters.convoluteFloat32(grayscale,
[ -1, 0, 1,
-2, 0, 2,
-1, 0, 1 ]);
var horizontal = Filters.convoluteFloat32(grayscale,
[ -1, -2, -1,
0, 0, 0,
1, 2, 1 ]);
var final_image = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<final_image.data.length; i+=4) {
// make the vertical gradient red
var v = Math.abs(vertical.data[i]);
final_image.data[i] = v;
// make the horizontal gradient green
var h = Math.abs(horizontal.data[i]);
final_image.data[i+1] = h;
// and mix in some blue for aesthetics
final_image.data[i+2] = (v+h)/4;
final_image.data[i+3] = 255; // opaque alpha
}
E tem um monte de outros filtros de convolução legais por aí esperando que você os descubra. Por exemplo, tente implementar um filtro de Laplace no brinquedo de convolução acima e veja o que ele faz.
Conclusão
Espero que este pequeno artigo tenha sido útil para apresentar os conceitos básicos sobre como escrever filtros de imagem em JavaScript usando a tag HTML canvas. Recomendo que você implemente mais filtros de imagem. É bem divertido.
Caso você precise de um melhor desempenho dos filtros, geralmente é possível portá-los para usar sombreadores de fragmento WebGL e fazer o processamento da imagem. Com eles, é possível executar a maioria dos filtros simples em tempo real, o que permite usá-los para o pós-processamento de vídeos e animações.