使用cropit插件导出多个图像

Question

我正在使用cropit插件，它工作得很好但有人知道如何放置多个图像预览并正确导出它们而不需要执行多个功能吗？这是插件的demo，下面是代码：

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