Saving a cropped image in js with POST

Question

I just started using cropit, and I'm having some problems.

I've tried to find the best way to submit a cropped image, and I found that it's really hard to find a definate answer, even when googling on this.

Here are my thoughts so far:

Way 1

Get the position from js, submit that new position and crop it, from the new position, I got from js.

Way 2

Submit the base64 version of the cropped image as a hidden form element. I'm afraid that I wont be able to get the full image this way though, since the preview (where you crop the image), is smaller than the final image should actually be.

Any ideas on what would be the best way to get the cropped image?

$(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 library can be found here: http://scottcheng.github.io/cropit/

Answer 1

Cropit author here. Hope it's not too late.

I'd suggest submitting the cropped image in a base64 encoded format in a hidden input. Regarding your concern about exported image size/quality, cropit provides an option exportZoom, which allows you to specify a ratio between the size you would like an exported image to be and the preview div. Please see the doc for more details (search "exportZoom" in the page).