Filtros de tela

Adicionar filtros às imagens pode torná-las mais atraentes e compartilháveis – basta perguntar ao Instagram, ao Snapchat, ao Prism e a todos os outros aplicativos existentes. Há alguns anos, recebemos o incrível Filtros CSS o que nos permite usar um conjunto fixo de métodos de filtro para embelezar nossas fotos. É claro que os filtros CSS funcionam em elementos HTML padrão, não apenas em imagens, mas as imagens ilustram melhor os efeitos dos filtros.

Fiquei feliz em ver que os navegadores implementaram recentemente esses mesmos filtros para <canvas> . Vamos começar com um trecho do meu Conversão de imagem de tela JavaScript post, convertendo uma imagem em tela:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

var canvas = convertImageToCanvas(document.querySelector('img'));

Com um <canvas> pronto, podemos implementar filtros CSS sempre que quisermos:

canvas.getContext('2d').filter="blur(5px) opacity(0.6)";

O senhor pode ver um lista completa de filtros na MDN. Fico feliz que uma API que começou com o CSS tenha sido espelhada no canvas!