6

Queria fazer um upload de imagens com Crop dinâmico. Já olhei tutoriais e etc, e não consigo fazer.

Queria, por exemplo, carregar uma imagem pelo input e na hora abre um modal com o Crop dinâmico, tipo o do Facebook, depois enviar o crop pro banco e grava a imagem recortada e a original, numa pasta. Tem como?

0

2 Respostas 2

1

Sim, você pode usar o Jcrop, que é um plugin simples de jQuery para capturar as dimensões do corte no navegador:

$(setup)

function setup() {
  $('#picture').Jcrop({
    onSelect: function(c) {
      updateStats(c);
      sendToServer(c);
    },
  });
}

function updateStats(c) {
  $('#stats').text(JSON.stringify(c, null, 2));
}
 
function sendToServer(c) {
  // Mande essas coordenadas para o seu servidor,
  // com a imagem.
  // `c.h` - Altura cortada
  // `c.w` - Largura cortada
  // `c.x` - Coordenada x do corte
  // `c.y` - Coordenada y do corte
  // `c.x2` - Coordenada x do fim do corte
  // `c.y2` - Coordenada y do fim do corte
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
<img id="picture" src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_mathkh9Vuo1ruwwtio1_500.jpg" height="300" width="250" />
<pre id="stats"></pre>

Uma vez que esses dados estejam no seu servidor, não deve ser muito difícil redimensionar a imagem usando alguma ferramenta como o graphicsmagick. A documentação para o PHP está disponível aqui.

1

Tem como, o plugin mais recomendado que eu conheço é Cropper, veja os exemplos no site oficial aqui.

A instalação é prático, veja um pequeno tutorial abaixo, segundo documentação oficial.

HTML

<div class="container">
  <img src="picture.jpg">
</div>
<div id="previewImg">
  <img src="picture.jpg">
</div>

JavaScript

$('.container > img').cropper({
  aspectRatio: 16 / 9,
  crop: function(data) {
    // Saída do resultado da imagem 'cropado'.
    // Como enviar a imagem cortado para seu servidor.
  },
  preview: "$('#previewImg')", // Pré-visualização Imagem
});

A documentação completa está aqui

Espero que tenha te ajudado. =)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .