6

我正在使用cropit插件，它运行良好，但有人知道如何放置多个图像预览并正确导出它们而不执行多个功能吗？这是插件的演示，这里是代码：

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

4

0 回答 0