Pixelato dinamicamente um elemento de imagem html

Question

Devo tirar uma imagem em uma página da Web e depois usar o JavaScript (ou o que seria mais adequado) para 'pixelate' dinamicamente (por exemplo, em quadrados de 20px). Então, à medida que o usuário rola na página, preciso que a imagem aumente gradualmente em resolução, até que não esteja mais pixelizada.

Alguma idéia de como eu poderia fazer isso? Sei que poderia usar o PHP para redimensionar uma imagem e várias vezes e apenas trocar a imagem, mas isso exigiria carregar várias imagens extras. Além disso, eu sei que provavelmente poderia fazer o efeito com o Flash & Pixelbender, mas quero alcançá -lo dentro das limitações do HTML5, CSS & JavaScript, se possível.

Aprecie qualquer pensamento!

Atualização: algo assim, mas com JavaScript em vez de flash? http://www.reflektions.com/miniml/template_permalink.asp?id=390

Answer 1

Você poderia render a foto em um oculto <canvas> elemento. Em seguida, use uma derivação da técnica descrita aqui http://dev.opera.com/articles/view/html-5-anvas-the-basics/#pixelbasedmanipulation . Para criar uma versão pixelizada da imagem em um segundo <canvas> elemento usando sempre diminuindo fillRect's. Dessa forma, você até buffer os dados da imagem orginal.

editar: Eu usaria 2 <canvas> Elementos para que você só precise buscar e desenhar a imagem original uma vez. Talvez você possa buffer/cache esta imagem na mesma <canvas> Elemento, mas desenhando -o para fora da porta de exibição, não tenho certeza se isso é possível.

Answer 2

Eu usaria um cálculo em que você obtivesse a largura em pixels divididos pela largura quadrada e, em seguida, a altura dividida pela altura quadrada. Isso daria a você a resolução mais baixa que você procura.

Em seguida, você pode encontrar uma maneira de alterar a resolução para o resultado ou pegar a cor de cada pixel na posição (altura e largura)/2 do quadrado que você procura. Em seguida, gerá -los em tags ou tabela div com a cor e o tamanho apropriados, resultando na imagem.

Eu tenho uma idéia provavelmente mais rápida, onde você pode ter várias versões da imagem e alterar o Z-Index ou a visibilidade deles enquanto você rola. Basicamente, cada imagem teria as diferentes resoluções. Se você precisar fazer isso com muitas imagens, essa solução não será tão eficiente quanto haveria muita edição de imagens, mas você sempre pode fazer uma edição de lote.

Deixe -me ver se consigo pensar em mais idéias, então vou editar.

Answer 3

Dê uma olhada em http://close-pixelate.desandro.com/

Explicação aqui: https://stackoverflow.com/a/8372981/22470

Answer 4

Não de uma maneira portátil.

Isso pode ser factível no flash. As extensões JS do Firefox permitem ler imagens como matrizes JS, strings base64 etc. Você pode experimentar "1 div = 1 pixel", mas é difícil obter qualquer tamanho razoável da imagem a qualquer velocidade razoável. Se você se sentir realmente hiper, pode tentar criar imagens codificadas por Base64 em tempo real usando os dados: Uri ... muitas maneiras, mas nenhuma boa ...