Saving cropped image in js using POST
I just started using cropit and am having problems.
I tried to find the best way to present a cropped image and I found it really hard to find a specific answer even if it works with search.
Here are my thoughts:
Method 1
Get the position from js, submit this new position and trim it, from the new position obtained from js.
Path 2
Submit the base version of the cropped image as a hidden form element. I'm afraid that I won't be able to get the full image this way, although 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 can be found here: http://scottcheng.github.io/cropit/
source to share
The author of Cropit is here. Hope it's not too late.
I would suggest sending a base64 encoded cropped image in a hidden input. As far as your concerns about the exported size and image quality, the tutorial has an option exportZoom
that lets you specify the ratio between the size you would like to export the image to and the pre-div. See doc for details (search for "exportZoom" on the page).
source to share
I was looking for this too. Figured out to pass the value of the image through hidden input, but stuck with saving the image, so for anyone interested, this is the code I ended up with:
$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);
source to share
$(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>
source to share