我刚开始使用cropit,我遇到了一些问题.

我试图找到提交裁剪图像的最佳方法,我发现很难找到一个明确的答案,即使在谷歌搜索时也是如此.

到目前为止,我的想法是：

方式1

从新的位置获取js的位置,提交新的位置并裁剪它,我从js获得.

方式2

提交裁剪图像的base64版本作为隐藏表单元素.我担心我不能以这种方式获得完整的图像,因为预览(裁剪图像的位置)比实际应该的最终图像小.

关于什么是获得裁剪图像的最佳方法的任何想法？

$(function() {
  $('.image-editor').cropit({
    imageState: {
      src: 'http://lorempixel.com/500/400/'
    }
  });
});

.cropit-image-preview {
  background-color: #f8f8f8;
  background-size: cover;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 275px;
  height: 102px;
  cursor: move;
}

.cropit-image-background {
  opacity: .2;
  cursor: auto;
}

.image-size-label {
  margin-top: 0.6rem;
}

<script src="http://scottcheng.github.io/cropit/scripts/vendor.js"></script>
<form>
<div class="image-editor">
  <label>Cover Image</label>
  <input type="file" class="cropit-image-input">
  <div class="cropit-image-preview"></div>
  <div class="image-size-label">
    Resize image
  </div>
  <input type="range" class="cropit-image-zoom-input">
  <p class="help-block">Optimal size is 550x203.</p>
</div>
  <input type="submit"/>
</form>

cropit图书馆可以在这里找到：http://scottcheng.github.io/cropit/

解决方法:

Cropit作者在这里.希望现在还为时不晚.

我建议在隐藏输入中以base64编码格式提交裁剪后的图像.关于您对导出的图像大小/质量的关注,cropit提供了一个选项exportZoom,它允许您指定要导出的图像的大小与预览div之间的比率.有关详细信息,请参阅the doc(在页面中搜索“exportZoom”).