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.
59 lines
1.6 KiB
59 lines
1.6 KiB
<html> |
|
|
|
<head> |
|
<script src="/dist/tesseract.dev.js"></script> |
|
<style> |
|
.column { |
|
float: left; |
|
width: 20%; |
|
padding: 5px; |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
<input type="file" id="uploader"> |
|
|
|
<div class="row"> |
|
<div class="column"> |
|
<p>Input Image</p> |
|
<img id="imgInput" style="max-width:500px;"> |
|
</div> |
|
<div class="column"> |
|
<p>Rotated, Original Color</p> |
|
<img id="imgOriginal" style="max-width:500px;"> |
|
</div> |
|
<div class="column"> |
|
<p>Rotated, Grey</p> |
|
<img id="imgGrey" style="max-width:500px;"> |
|
</div> |
|
<div class="column"> |
|
<p>Rotated, Binary</p> |
|
<img id="imgBinary" style="max-width:500px;"> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const recognize = async ({ target: { files } }) => { |
|
document.getElementById("imgInput").src = URL.createObjectURL(files[0]); |
|
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 ret = await worker.recognize(files[0], { saveImageOriginal: true, saveImageGrey: true, saveImageBinary: true, rotateAuto: true }) |
|
document.getElementById("imgOriginal").src = ret.data.imageOriginal; |
|
document.getElementById("imgGrey").src = ret.data.imageGrey; |
|
document.getElementById("imgBinary").src = ret.data.imageBinary; |
|
|
|
} |
|
const elm = document.getElementById('uploader'); |
|
elm.addEventListener('change', recognize); |
|
</script> |
|
</body> |
|
|
|
</html> |