Exporting multiple images using cropit plugin

Question

I'm using cropit plugin, it's working perfectly but does anybody know how to put multiple image previews and export them correctly without doing multiple functions? Here is the demo for the plugin, and here is the code:

$('#image-cropper').cropit();

// In the demos I'm passing in an imageState option
// so it renders an image by default:
// $('#image-cropper').cropit({ imageState: { src: { imageSrc } } });

// Exporting cropped image
$('.download-btn').click(function() {
  var imageData = $('#image-cropper').cropit('export');
  window.open(imageData);
});

.cropit-preview {
  /* You can specify preview size in CSS */
  width: 960px;
  height: 540px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This wraps the whole cropper -->
<div id="image-cropper">
  <!-- This is where the preview image is displayed -->
  <div class="cropit-preview"></div>
  
  <!-- This range input controls zoom -->
  <!-- You can add additional elements here, e.g. the image icons -->
  <input type="range" class="cropit-image-zoom-input" />
  
  <!-- This is where user selects new image -->
  <input type="file" class="cropit-image-input" />
  
  <!-- The cropit- classes above are needed
       so cropit can identify these elements -->
</div>

<!-- This wraps the whole cropper -->
<div id="image-cropper">
  <!-- This is where the preview image is displayed -->
  <div class="cropit-preview"></div>
  
  <!-- This range input controls zoom -->
  <!-- You can add additional elements here, e.g. the image icons -->
  <input type="range" class="cropit-image-zoom-input" />
  
  <!-- This is where user selects new image -->
  <input type="file" class="cropit-image-input" />
  
  <!-- The cropit- classes above are needed
       so cropit can identify these elements -->
</div>

Exporting multiple images using cropit plugin

0 Answers0