Question

我刚开始使用cropit，我遇到了一些问题。

我试图找到提交裁剪图片的最佳方式，而且我发现很难找到明确的答案，即使在谷歌搜索时也是如此。

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

方式1

从js获取位置，提交新位置并从新位置裁剪，我从js获得。

方式2

将裁剪图像的base64版本提交为隐藏表单元素。我担心我无法通过这种方式获得完整的图像，因为预览（裁剪图像的位置）比最终图像实际上要小。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

可在此处找到

cropit库：http://scottcheng.github.io/cropit/

Answer 1

这里的Cropit作者。希望现在还不晚。

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

Answer 2

我也在寻找这个。想通过一个隐藏的输入传递图像值但是在保存图像时卡住了，所以对于每个感兴趣的人来说，这是我最终使用的代码：

$saveImage = 'NAMEOFTHEIMAGEFILE.png';
$data = $_POST['DATAURI'];
list($t, $data) = explode(';', $data);
list($t, $data)  = explode(',', $data);
$src = base64_decode($data);
file_put_contents('/'.$saveImage, $src);

Answer 3

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用POST在js中保存裁剪的图像

3 个答案: