Como aplicar Blur numa imagem usando html5 / canvas

O efeito é o seguinte, pegar uma imagem e aplicar o efeito de blur usando somente javascript, sem carregar outra imagem.

Pra isso, é manipulado, pixel a pixel, colocando um pixel alpha por cima da imagem.

Veja a imagem original:

Blur em canvas

Imagem com filtro de Blur

Como a imagem é gerada automaticamente, dá pra aplicar o efeito no mousemove, ou em qualquer outra ação. Veja o exemplo abaixo.

Imagem com filtro de Blur no mousemove

Pro processamento ficar mais rápido, eu gerei um segundo canvas, só com pro efeito de criar a imagem dentro da máscara.

Todos os exemplos estão disponíveis aqui

Leave a Reply

Your email address will not be published. Required fields are marked *