PS: Not a duplicate as it has multi cropping feature.

I am make a Image crop app with multiple sections cropping areas, after lot of try and research I found Jcrop useful. Now I am trying to make interface where client can upload their image by itself and then crop easily.

• In below HTML there is static image as of now and upload button too where user can upload and replace static image in a canvas.

HTML code:

  <div style="padding:0 5%;">
<h1 style="font-family:Helvetica,sans-serif;">
  Jcrop Example <span style="color:lightgray;">- draw some crops!</span>
</h1>

<img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">


 <div class="file btn btn-lg btn-primary">
  Upload
   <input type="file" name="file" />
 </div>
</div>

JavaScript:

  var jcp;
Jcrop.load('target').then(img => {
  jcp = Jcrop.attach(img, { multi: true });
  const rect = Jcrop.Rect.sizeOf(jcp.el);
  jcp.newWidget(rect.scale(.7, .5).center(rect.w, rect.h));
  jcp.focus();
});



function setImage(tag) {
  document.getElementById('target').src =
    'https://d3o1694hluedf9.cloudfront.net/' + tag;
}