<!DOCTYPE html>
<html>
<head>
<title>MRZ Area Selection</title>
<link rel="stylesheet" href="cropper.min.css">
</head>
<body>
<h2>Select MRZ Area</h2>
<form action="process_cropped_image.php" method="post">
<input type="file" name="uploaded_image" accept="image/*" required><br>
<div>
<img id="uploadedImage" src="#" alt="Uploaded Image" style="max-width: 100%;">
</div>
<div>
<button type="button" id="selectAreaBtn">Select MRZ Area</button>
</div>
<div id="cropperContainer" style="display: none;">
<img id="cropperImage">
</div>
<input type="hidden" id="croppedData" name="croppedData">
<button type="submit">Extract MRZ</button>
</form>
<script src="cropper.min.js"></script>
<script>
const selectAreaBtn = document.getElementById('selectAreaBtn');
const uploadedImage = document.getElementById('uploadedImage');
const cropperContainer = document.getElementById('cropperContainer');
const cropperImage = document.getElementById('cropperImage');
const croppedDataInput = document.getElementById('croppedData');
let cropper;
selectAreaBtn.addEventListener('click', () => {
cropperContainer.style.display = 'block';
cropperImage.src = uploadedImage.src;
cropper = new Cropper(cropperImage, {
aspectRatio: 3.5, // MRZ aspect ratio
viewMode: 2, // Show cropped area within the container
ready() {
cropper.setData({ width: 400, height: 100 }); // Default cropping area size
}
});
});
// Handle the crop and save cropped data
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const croppedData = cropper.getData(true);
croppedDataInput.value = JSON.stringify(croppedData);
e.target.submit();
});
// Display the selected image
uploadedImage.addEventListener('change', (event) => {
const file = event.target.files[0];
uploadedImage.src = URL.createObjectURL(file);
});
</script>
</body>
</html>
|
Download
