<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
function readURL(input, id) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#'+id)
.attr('src', e.target.result)
;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<input type="file" id="image" name="image" onchange="readURL(this,'mini_foto_new');" />
<div id="target">
<img id="mini_foto_new" class="mini_foto" src="usuarios/default.jpg"/>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#target').Jcrop({
onSelect: selectedCoordinates,
onChange: changingCoordinates,
onRelease: finalCoordinates,
aspectRatio: 2 / 3,
minSize: [2,100],
maxSize: [500, 750]
});
});</script>
</body>
</html>I basically wanted to implement an image editing like the whatsapp web, where you choose an image and soon a preview appears in it that is allowed to edit (crop, resize) before uploading. I was trying the basics using Jcrop that I got to know today, but I could not get it to work. Here's what this beginning was like to try to reach my goal: