Php

Jquery crop de imagens | Jquery crop image resize image

Outro dia participei de um projeto de integração de um web-service com o front-end de um site. Ou seja, não podíamos re-dimensionar a imagem no lado do servidor. Encontrei ótimos plugins prontos, entretanto nossas necessidades específicas nos levou a implementar uma pequena rotina em jquery:

Para começar temos uma lista de imagens:

<ul>
  <li><img src='minhaimagem01.jpg" class='minhaimg'/></li>
  <li><img src='minhaimagem02.jpg" class='minhaimg'/></li>
  <li><img src='minhaimagem03.jpg" class='minhaimg'/></li>
  <li><img src='minhaimagem04.jpg" class='minhaimg'/></li>
</ul>

Supondo que precisemos de um tamanho único para as imagens, sem perder a proporção. A forma mais simples que conheço para isso é enviar a imagem para o background de uma div com o atributo background-position center.

Em jquery, usando a função .replaceWith()  é possível substituir as imagens em questão por uma div. A seguir o código que resolveria o problema:

  function cropImgToDiv(jquerySting, w, h){
    $(jquerySting).each(function() {
      $(this).replaceWith("<span style='background: url("+ $(this).attr("src") +") center center;width: "+ w +"px;height: "+ h +"px;display: block'> </span>");
    });
  }

  $(document).ready(function(){
    cropImgToDiv(".minhaimg", 120, 60);
  });

Você deve envolver o código acima em uma tag <script> no head da página. Veja o código completo:

http://pastebin.com/T6Y2fERi

Anúncios
Padrão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s