Hey @Shahbaz I was trying out a solution for you using cropper.js.
This is what you can do
Download cropper.js from here
//link the js files
<head>
<script src="jquery.js"></script> // optional
<link href="cropper.min.css" rel="stylesheet">
<script src="cropper.min.js"></script>
</head>
Body
<input type="file" name="image" id="image" onchange="readURL(this);"/>
<div class="image_container">
<img id="blah" src="#" alt="your image" />
</div>
<div id="cropped_result"></div> // Cropped image to display (only if u want)
<button id="crop_button">Crop</button> // Will trigger crop event
Javascript
<script type="text/javascript" defer>
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]);
setTimeout(initCropper, 1000);
}
}
function initCropper(){
var image = document.getElementById('blah');
var cropper = new Cropper(image, {
aspectRatio: 1 / 1,
crop: function(e) {
console.log(e.detail.x);
console.log(e.detail.y);
}
});
// On crop button clicked
document.getElementById('crop_button').addEventListener('click', function(){
var imgurl = cropper.getCroppedCanvas().toDataURL();
var img = document.createElement("img");
img.src = imgurl;
document.getElementById("cropped_result").appendChild(img);
/* ---------------- SEND IMAGE TO THE SERVER-------------------------
cropper.getCroppedCanvas().toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
// Use `jQuery.ajax` method
$.ajax('/path/to/upload', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
});
----------------------------------------------------*/
})
}
</script>
Hope this helps. Thanks.
