javascript - Saving a cropped image in js with POST - Stack Overflow

admin管理员组

文章数量:1352138

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: '/'
    }
  });
});

.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=".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>

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

• javascript
• php
• jquery
• crop

Share Improve this question Follow asked Sep 21, 2014 at 19:07 JazerixJazerix 4,8111010 gold badges4242 silver badges7474 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

I was looking for this as well. Figured to pass image value through an hidden input but got stuck on saving the image, so for everybody who is interested, this is the code I ended up using:

$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);

$(function() {
  $('.image-editor').cropit({
    imageState: {
      src: 'http://lorempixel./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>

本文标签： javascriptSaving a cropped image in js with POSTStack Overflow