Hello guys, I’m trying to create an account page where the user is able to change his avatar photo(this photo must be saved in some directory and in my database). This is my code:
main.js :
var loadFile = function (event) {
var output = document.getElementById('change-profile-pic');
output.src = URL.createObjectURL(event.target.files[0]);
$('#change-profile-pic').cropper("destroy");
var $previews = $('.preview');
$('#change-profile-pic').cropper({
ready: function () {
var $clone = $(this).clone().removeClass('cropper-hidden');
$clone.css({
display: 'block',
width: '100%',
minWidth: 0,
minHeight: 0,
maxWidth: 'none',
maxHeight: 'none'
});
$previews.css({
width: '100%',
overflow: 'hidden'
}).html($clone);
},
crop: function (e) {
var imageData = $(this).cropper('getImageData');
var croppedCanvas = $(this).cropper('getCroppedCanvas');
$('#profile-result').html('<img src="' + croppedCanvas.toDataURL() + '" class="thumb-lg img-circle" style="width:100px; height:100px;">');
$('#save-profile').click(function() {
$('#loading').show();
$.ajax({
type: 'POST',
url: 'set-profile.php',
data: {
url: croppedCanvas.toDataURL()
},
success: function(response) {
if (response == "success") {
$('#loading').html("Profile picture successfuly updated");
setTimeout(function(){
$('#loading').hide();
$('#change-profile').modal('hide');
}, 2000);
}
}
});
});
var previewAspectRatio = e.width / e.height;
$previews.each(function () {
var $preview = $(this);
var previewWidth = $preview.width();
var previewHeight = previewWidth / previewAspectRatio;
var imageScaledRatio = e.width / previewWidth;
$preview.height(previewHeight).find('img').css({
width: imageData.naturalWidth / imageScaledRatio,
height: imageData.naturalHeight / imageScaledRatio,
marginLeft: -e.x / imageScaledRatio,
marginTop: -e.v / imageScaledRatio
});
});
}
});
}
set-profile.php
<?php
function save_image($inPath, $outPath){
$in = fopen($inPath, "rb");
$out = fopen($outPath, "wb");
while ($chunk = fread($in, 8192)) {
fwrite($out, $chunk, 8192);
}
fclose($in);
fclose($out);
}
if (isset($session_username)) {
$url = $_POST['url'];
save_image($url, 'accounts/images/' . $session_username . '.jpg');
echo "success";
} else {
}
?>
and my form in account.php
<a href="#" data-toggle="modal" data-target="#change-profile">
<div id="profile-result">
<?php if (file_exists('accounts/images/' . $session_username . '.jpg')): ?>
<img src="<?php echo 'accounts/images/' . $session_username . '.jpg'; ?>" alt="" class="thumb-lg img-circle" style="width: 100px; height: 100px;">
<?php else: ?>
<img src="accounts/images/default.png" alt="" class="thumb-lg img-circle">
<?php endif ?>
</div>
</a>
<div class="modal fade" id="change-profile">
<div class="modal-dialog">
<div class="" style="background: #fff; padding: 10px;">
<div class="ajax-response" id="loading"></div>
<h4 class="m-t-5 m-b-5 ellipsis">Change profile</h4>
<div class="profile-pic-wraper col-sm-8">
<?php if (file_exists('accounts/images/' . $session_username . '.jpg')): ?>
<img src="<?php echo 'accounts/images/' . $session_username . '.jpg'; ?>" alt="" id="change-profile-pic" style="width: 40%;">
<?php else: ?>
<img src="accounts/images/default.png" alt="" id="change-profile-pic" style="width: 40%">
<?php endif ?>
</div>
<div class="preview-wrapper">
<div class="preview"></div>
</div></br>
<div>
<form action="" enctype="multipart/form-data">
<input type="file" accept="image/*" id="profile-file-input" onchange="loadFile(event)" name="">
<div style="position: absolute; right: 20px; bottom: 20px;">
<button href="#" class="btn btn-primary" data-dismiss="modal" style="background: #8fcb62;"> Close</button>
<input type="button" value="Save" class="btn btn-primary" id="save_profile" name="">
</div>
</form>
</div>
</div>
</div>
</div>
I dont know where is my mistake, is not showing my preview image, and is not saving it. I’am using js cropper cropper-github. Or if anyone have some better solution please help. Thank you!