|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<script src="/dist/tesseract.min.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('eng', 0, {
|
|
|
|
|
// corePath: '/tesseract-core-simd.wasm.js',
|
|
|
|
|
workerPath: "/dist/worker.min.js"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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>
|
