Image Cutting

Asked

Viewed 278 times

6

I wanted to upload images with Dynamic Crop. I’ve looked at tutorials and etc, and I can’t do.

For example, I wanted to load an image by input and then open a modal with Crop Dynamic, like Facebook, then send Crop to the bank and save the cropped image and the original, in a folder. Has as?

php javascript

2 answers

1

Yes, you can use the Jcrop, which is a simple jQuery plugin to capture the dimensions of the hack in the browser:

$(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>

Once that data is on your server, it shouldn’t be too difficult to resize the image using some tool like graphicsmagick. Documentation for PHP is available here.

1

Has like, the most recommended plugin I know is Cropper, see the examples on the official website here.

The installation is practical, see a small tutorial below, second official documentation.

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
});

The complete documentation is here

I hope it helped you. =)

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.