tesseract.js + canvas simple demo

by s_yoshiki

HTML

<script src="https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js"></script>
<input type="file">
<canvas id="canvas"></canvas>
<div id="progress">
</div>

<textarea id="textarea"></textarea>

CSS

#textarea {
    width: 500px;
    height: 500px;
}

JavaScript

const progress = document.getElementById('progress')
const textarea = document.getElementById('textarea')
const canvas = document.getElementById("canvas")

document.querySelector('input[type="file"]').onchange = function() {
    let img = this.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(img)

    reader.onload = function() {
        drawImage(reader.result)
    }
}

function drawImage(url) {
    let ctx = canvas.getContext('2d')
    let image = new Image()
    image.src = url
    image.crossOrigin = "Anonymous";
    image.onload = () => {
        canvas.width = image.width
        canvas.height = image.height
        ctx.drawImage(image, 0, 0)

        let src = ctx.getImageData(0, 0, canvas.width, canvas.height)

        Tesseract.recognize(src).progress((p) => {
            progress.innerHTML = p.progress
        }).then((r) => {
            textarea.value = r.text
        })
    }
}