#I LOVE YOU EVERDAY#

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Cropping</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<style>
    #image-preview {
        max-width: 100%;
    }
    
    #cropped-container {
        position: relative;
    }

#cropped-container img {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
</head>
<body>
<input type="file" id="inputImage">
<br>
<button id="cropButton">Crop Signature</button>
<br>
<h2>Signature Cropped Image Preview</h2>
<div id="cropped-container">
    <img id="image-preview" src="" alt="Cropped Image Preview">
</div>
<form id="submitForm" action="process_image.php" method="post">
    <input type="hidden" id="croppedImageData" name="croppedImageData">
    <input type="submit" value="Submit Cropped Image">
</form>

function initCropper() {
        var image = document.getElementById('original-image');
        var cropper = new Cropper(image, {
            aspectRatio: NaN, // Allows free cropping
            viewMode: 1, // Show the cropped area in the center
        });

document.getElementById('cropButton').addEventListener('click', function() {
            var croppedCanvas = cropper.getCroppedCanvas();
            var croppedImage = new Image();
            croppedImage.src = croppedCanvas.toDataURL();
            document.getElementById('cropped-container').innerHTML = '';
            document.getElementById('cropped-container').appendChild(croppedImage);
            document.getElementById('cropped-container').style.width = croppedCanvas.width + 'px';
            document.getElementById('cropped-container').style.height = croppedCanvas.height + 'px';
            document.getElementById('croppedImageData').value = croppedCanvas.toDataURL(); // Set the value of the hidden input
        });
    }
</script>
</body>
</html>