Pure Javascript OCR for more than 100 Languages 📖🎉🖥
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

83 lines
2.2 KiB

<html>
<head>
<script src="/dist/tesseract.dev.js"></script>
<style>
.column {
float: left;
width: 20%;
padding: 5px;
}
</style>
</head>
<body>
<div class="row" id="imgRow">
<div class="column">
<p>Input Image</p>
<img style="max-width:500px;">
</div>
<div class="column">
<p>Rotated, Original Color</p>
<img style="max-width:500px;">
</div>
<div class="column">
<p>Rotated, Grey</p>
<img style="max-width:500px;">
</div>
<div class="column">
<p>Rotated, Binary</p>
<img style="max-width:500px;">
</div>
</div>
<script>
const recognize = async () => {
const element = document.getElementById("imgRow");
const worker = await Tesseract.createWorker({
// corePath: '/tesseract-core-simd.wasm.js',
workerPath: "/dist/worker.dev.js"
});
await worker.loadLanguage('eng');
await worker.initialize('eng');
await worker.initialize();
const fileArr = ["../data/meditations.jpg", "../data/tyger.jpg", "../data/testocr.png"];
let timeTotal = 0;
let lastElement = element;
for (let file of fileArr) {
for (let rad of [-0.2, -0.1, 0.1, 0.2]) {
const newElement = element.cloneNode(true);
// Create the rotated images
const ret1 = await worker.recognize(file, { rotateRadians: rad }, { text: false, blocks: false, hocr: false, tsv: false, imageColor: true });
newElement.children[0].children[1].src = ret1.data.imageColor;
// Attempt to remove the rotation using the auto-rotate feature
const ret2 = await worker.recognize(ret1.data.imageColor, { rotateAuto: true }, { text: false, blocks: false, hocr: false, tsv: false, imageColor: true, imageGrey: true, imageBinary: true, debug: true });
newElement.children[1].children[1].src = ret2.data.imageColor;
newElement.children[2].children[1].src = ret2.data.imageGrey;
newElement.children[3].children[1].src = ret2.data.imageBinary;
lastElement.after(newElement);
lastElement = newElement;
}
}
}
recognize();
</script>
</body>
</html>