Image Cutting


I wanted to upload images with dynamic Crop. I have already looked at tutorials and etc., and I can not do it.

I wanted to, for example, load an image by input and at the time open a modal with dynamic Crop, type Facebook, then send the crop to the bank and save the cropped image and the original in a folder. How?

asked by anonymous 18.02.2015 / 15:49

2 answers


Yes, you can use the Jcrop , which is a simple jQuery plugin for capturing the cut dimensions in the browser :


function setup() {
    onSelect: function(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=""></script><scriptsrc=""></script>
<img id="picture" src=""height="300" width="250" />
<pre id="stats"></pre>

Since this data is on your server, it should not be too difficult to resize the image using some tool like graphicsmagick . The documentation for PHP is available here .

24.02.2015 / 19:07

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

Installation is handy, see a small tutorial below, according to official documentation . p>


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


$('.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 full documentation is here

I hope I have helped you. =)

24.02.2015 / 19:56