PHP Classes

File: index.html

Recommend this page to a friend!
  Classes of Ahmed Abdulla   Passport MRZ Information PHP Image Crop   index.html   Download  
File: index.html
Role: Auxiliary data
Content type: text/plain
Description: Main Page
Class: Passport MRZ Information PHP Image Crop
Crop images using coordinates defined by the user
Author: By
Last change:
Date: 9 months ago
Size: 2,363 bytes
 

Contents

Class file image Download
<!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>