Verpixeln de fotos em JavaScript – código-bude.net

Perto Pixelate tutorial Hoje, mais uma vez há algum código JavaScript. Deve ser como verpixeln para imagens usando JavaScript. Que tem os dois antes bem como desvantagens, que eu gostaria de enumerar brevemente abaixo.

Vantagens:

  • O pixelize pode acontecer dinamicamente (desnecessário esforço manual no programa de gráficos. Gráficos devem ser conhecidos antecipadamente.)
  • O poder de computação, preciso ser desenrolado para o cliente. Em contraste com uma solução do lado do servidor (por exemplo usando PHP/Imagick), a carga de processamento é distribuída que é ocupado com elevado número de visitantes, os cálculos de gráfico de servidor Web

Desvantagens:

  • O pixelation deve ser usado ao invés de efeito gráfico ou design, porque os dados Sim, uma vez unverpixelt ao cliente será enviada. Deve, então, realmente, ser a imagem conteúda apagada, ainda deve ser feito antes da entrega ao cliente o pixelation

Como é que o pixelize?

Imagens em JavaScript nós para verpixeln nos fazer uma biblioteca chamada “Pixelate perto” de usar. É preciso imagens a partir de um -dia, lê isto, pixelizada e então registros-los em um elemento de . Finalmente, Pixelate perto substituiu o original tag com o elemento .

Porque os motores de busca executar qualquer código JavaScript no caso normal, eles veem que ainda tag com a imagem de unverpixelten e indexar isso pode também! Como mencionado na introdução, você deve usar esse método apenas como um elemento de design, mas nenhum caso de esconder a informação da imagem para o pixelize!

Como faço para Pixelate perto?

Antes de usarmos Pixelate perto, devemos incluir claro de tudo apenas em nossa página Web. A versão atual pode ser encontrada aqui: baixar (fechar-pixelate.js)

Então, devemos incluir a biblioteca na página da Web.

Agora precisamos de uma imagem que queremos verpixeln.

Desde que a imagem deve estar completamente carregada, escrevemos a chamada biblioteca Pixelate perto no evento onload. (Se você trabalha com jQuery, não confundido evento onload com jQuerys evento pronto. Já, o evento pronto aumenta quando nem todas as imagens são carregadas. “É muito cedo para Pixelate perto!)

Window. OnLoad = function() {document.getElementById(‘squares’).closePixelate ([{resolução: 8}]);};

No evento onload, agora nós estamos olhando para a imagem usando o método getElementById e então chamar o método closePixelate para o verpixeln. No exemplo acima, especificamos a configuração mínima com a opção de “resolução”.

Uma página de amostra pode parecer com isso:

Original


Pixelate – praças

Era tudo uma imagem usando JavaScript para verpixeln. Pixelate próximo pode no entanto ainda muito mais. Recorro a alternativa opções mais abaixo no artigo.

Demo e exemplos

O exemplo acima pode-se também como demo on-line para olhar para você, você, ou fazer o download. Se você baixá-lo e off-line, quer testar o exemplo melhor no Firefox abre porque há outro navegador normalmente à questão política de mesma origem. (On-line, no seu servidor Web/webspace, funciona no entanto em qualquer caso e (qualquer) navegador.)

Demo on-line | Baixar demo

Mais opções

Como mostrado no segundo exemplo da demo on-line acima, o método de ClosePixelate leva alguns outros parâmetros.Isto, alguns efeitos podem ser conseguidas mais do que pura pixelize.

resolução – é um parâmetro opcional e indica a distância de pixels processados.
forma – indica a forma do pixel. A escolha são square (praça), circle (círculo) e diamante (diamante). A forma padrão é quadrada (praça).
tamanho – especifica o tamanho do pixel processado.
deslocamento – especifica o deslocamento. (Um fator que mudou a grade de pixels computada).
alfa – especifica a transparência. A gama de intervalos de valores (não visível) de 0 para 1 (completamente opaco).

Se quiser encontrar uma mistura viável de todos os parâmetros e nem sempre e, novamente, salvar e recarregar o rápido quer, então thepixelator.com olhar para você. A página é uma interface gráfica para Pixelate perto, assim você pode experimentar diferentes configurações sem muito esforço.

Conclusão

Fechar Pixelate minha opinião é realmente um grande pedaço de JavaScript código, que eu poderia usar em projetos tem sido de 2 – 3 vezes faz sentido. A operação é fácil e simples. Você deve estar sempre ciente de que os dados são apenas o tempo de execução e cliente pixelizada. (Ver introdução para uma indicação dos perigos!)

O que você acha da biblioteca? Você pode usá-lo ou que não é seu caso?

Sobre o autor: Este artigo, bem como 363 outros artigos sobre código-bude.net, escrito por Raphael. -Desde 2011 blog aqui sobre programação, meu software, escrever tutoriais e tentar o meu conhecimento, portanto ele vai bem, para compartilhar com meus leitores. Além disso, escrevo sobre temas de meus estudos sobre derwirtschaftsinformatiker.de. E-mail • Google + • Facebook • Twitter

3SHARESFacebookTwitterGoogleWhatsappRedditPocketStumbleuponPinterestXingMail