Extract passport data from WebPage

Today my wife told about an issue about capturing data from a passport.
And then my inner geek said, it has nothing to do with the daily work, so lets do it.

I did like 5 min of googling, 30 min of copy pasting and like 2 hours of bug fixing and I made it:
password

The pieces are simple.
I needed a cropper. Which I found at https://github.com/fengyuanchen/cropperjs
And I found how to extract the MZR from the passport from: https://github.com/evermeer/PassportScanner/blob/master/Pod/MRZ.swift

I was too lazy to finish implementing the MZR extraction, but it works.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Password</title>
    <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.3.4/cropper.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.3.4/cropper.js"></script>
</head>

<body>
    <img id="image" src="NLpaspoort.jpg">
    <script>
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {});

        function process() {
            cropped.src = cropper.getCroppedCanvas().toDataURL();
            document.getElementById("results").value = "Wait for result";
            setTimeout(function() {
                var job = Tesseract.recognize(cropped, {
                    lang: 'spa',
                    langPath: '.',
                    tessedit_char_whitelist: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ<'
                });
                job.progress(message =>
                    document.getElementById('results').value = message.status);
                job.catch(err =>
                    document.getElementById('results').value = err);
                job.finally(resultOrError =>
                    document.getElementById('results').value = resultOrError.text);
            }, 500);

        }
    </script>
    <button onclick="process()">Extract data</button>
    <img id="cropped" src="">
    <h1>Results</h1>
    <textarea id="results">
        Press Extract
    </textarea>
</body>

</html>