Crop Image with Jcrop

Crop Image with Jcrop

HTML

<script src="https://rawgit.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
<div>
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" id="imgcrop" />
</div>
<div>
<canvas id="preview" width="200" height="300"></canvas>
</div>

CSS

#imgcrop {
    height: 450px;
}

#preview {
    width:200px;
    height:300px;
    overflow:hidden;
}

JavaScript

function updatePreview(c) {
  if (parseInt(c.w) > 0) {
    // Show image preview
    var imageObj = jQuery("#imgcrop")[0];
    var canvas = jQuery("#preview")[0];
    var context = canvas.getContext("2d");

    context.beginPath();
    //context.arc(50, 50, 50, Math.PI * 2, 0, true); // you can use any shape
    context.arc(50, 50, 50, Math.PI * 4, 0, true); // you can use any shape
    context.clip();
    context.closePath();

    //context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 100, 100);
    context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 100, 100);
  }
};

function getcroparea(c) {
  jQuery('.hdnx').val(c.x);
  jQuery('.hdny').val(c.y);
  jQuery('.hdnw').val(c.w);
  jQuery('.hdnh').val(c.h);
};

/*
jQuery('#imgcrop').Jcrop({
  onSelect: getcroparea,
  onChange: updatePreview,
  aspectRatio: 1,
  setSelect: [80, 45, 100, 100],
  boxWidth: 0,
  boxHeight: 0
});*/

$.Jcrop('#imgcrop',{ 
  trueSize: [$('#imgcrop')[0].naturalWidth,$('#imgcrop')[0].naturalHeight],
  onSelect: getcroparea,
  onChange: updatePreview,
  aspectRatio: 1,
  setSelect: [80, 45, 100, 100]
});