Currently, I am working on cropping an uploaded image using Jcrop. My goal is to enable the user to crop the image upon uploading it without storing the original image on the server. Instead, only the cropped part selected by the user via Jcrop will be saved to the server. You can view the issue on this fiddle link.
The code I have implemented is as follows:
HTML:
<form id="form1">
<input type='file' id="imgInp" />
<img id="blah" class="crop" src="#" alt="your image" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>
CSS:
<style>
#blah {
background-color: #FFF;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>
Js:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
console.log(this);
readURL(this);
$(function(){
$('.crop').Jcrop({
onSelect: updateCoords,
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
});
function updateCoords(c)
{
console.log(c);
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
My approach has been to use the same image for JCrop after upload so that I can obtain coordinate values necessary for generating the final image. However, I am encountering a problem where the cropped area appears black instead of displaying the uploaded image. I would appreciate any insights on what might be wrong with the code.