I have been able to implement the same UI Logic for the Web App I found on this URL, and now I am stuck on the Backend Logic that generated the Merged images (i.e the Cropped Image and the placeholder image as seen on the page) and Renders it to the DOM.
As it is right now, my AJAX never resolves with the success callback, instead, it always resolves with the error callback and I have no clue what I am doing wrong, please? How can I achieve exactly the same backend logic has seen from the web app in this URL: https://rhapsodyofrealities.org/rhapathon/?
Using PHP, this is what I have so far for the Backend Logic. Problem with this method is, it tries to output the image directly to the page:
$targetDir = "uploads/";
$fileName = $targetDir.'complete_'.time().".png";
if(isset($_POST['image'])) {
$placeholder = './rhapathon.jpeg';
$src = $_POST['image'];
list($width, $height) = getimagesize($src);
// $placeholder = imagecreatefromstring(file_get_contents($placeholder));
$placeholder = imagecreatefromjpeg($placeholder);
// $src = imagecreatefromstring(file_get_contents($src));
$src = imagecreatefrompng($src);
imagecopy($placeholder, $src, 200, 200, 0, 0, 300, 300);
header('Content-Type: image/png');
// $imgobj = array("img" => imagepng($placeholder, $fileName));
// $result = json_encode($imgobj);
// echo $result;
imagepng($placeholder);
// Free Memory
imagedestroy($placeholder);
imagedestroy($src);
}
?>
My HTML with the Entire UI and Client Logic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name=description content="Christ Embassy Kubwa Church">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Good Miracle Friday Crusade Flyer Generator</title>
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-reboot.min.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css"> -->
<link rel="stylesheet" type="text/css" href="./node_modules/croppie/croppie.css">
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<!-- Header -->
<header class="container-fluid p-0 text-center rounded-0 m-0 mb-5">
<div class="jumbotron p-2 bg-info rounded-0 m-0">
<h1 class="font-weight-lighter display-5 text-white">GOOD MIRACLE FRIDAY CRUSADE</h1>
</div>
</header>
<!-- /Header -->
<div class="container">
<!-- Card -->
<div class="card mx-auto rounded-top rounded-bottom" style="overflow: hidden;">
<!-- Card-Head -->
<div class="card-heading bg-dark text-white p-2 lead font-weight-light">Create Avatar</div>
<!-- /card-Head -->
<!-- Card-Body -->
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo" style="width:350px"></div>
</div>
<!-- Col -->
<div class="col-md-4" style="padding-top:30px;">
<div class="mt-0 mb-5">
<strong>STEP 1 : Select Image and adjust to fit</strong>
<input type="file" id="upload" name="fileToUpload">
</div>
<div class="mt-0 mb-5">
<strong>STEP 2 : Upload Image and Download</strong>
<br>
<button class="btn btn-info upload-result">Upload Image</button>
</div>
</div>
<!-- /Col -->
<!-- Col -->
<div class="col-md-4">
<div id="upload-demo-i" style="background:url('./rhapathon.jpeg'); background-size: 300px 300px; width:300px;height:300px;margin-top:30px">
</div>
</div>
<!-- /Col -->
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script> -->
<script src="./node_modules/croppie/croppie.js"></script>
<!-- <script src="./node_modules/html2canvas/dist/html2canvas.min.js"></script> -->
<!-- <script src="./node_modules/canvas2image/canvas2image.js"></script> -->
<script src="./index.js"></script>
<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: {
width: 300,
height: 300,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
console.log('Uploading image');
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport',
}).then(function (resp) {
$.ajax({
url: "upload.php",
type: "POST",
data: {"image":resp},
dataType:'JSON',
success: function (data) {
console.log('response ='+data.img);
// html = '<img src="' + resp + '" />';
// $("#upload-demo-i").html(html);
html = '<img width="300px" src="' + data.img + '" /><a href=" '+data.img+' " download="gfmc"><button style="margin-top:20px; margin-bottom:100px" class="btn btn-danger upload-result">Download Avatar</button></a> <a href="http://rhapsodyofrealities.org"><button style="margin-top:-50px; margin-bottom:100px" class="btn btn-info upload-result">Proceed to Rhapsody Official Website</button></a>';
$("#upload-demo-i").html(html);
},
error: function (err) {
console.error('Error occured: ', err);
}
});
});
});
// Remove alt attribute from image
window.onload = () => {
document.querySelector('.cr-image').removeAttribute("alt");
document.querySelector('.cr-slider').value="0";
document.querySelector('.cr-slider').focus();
};
</script>
</body>
</html>
