feat: update file reader example

edysegura · Jun 6, 2024 · 049f2d2 · 049f2d2
1 parent 053797d
commit 049f2d2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/file-reader/index.html b/file-reader/index.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>File Reader API</title>
     <link rel="stylesheet" href="css/style.css" />
+    <script type="module" src="js/index.js" defer></script>
   </head>
   <body>
     <input type="file" />
@@ -15,7 +16,5 @@
     <div class="ocr-result">
       <p></p>
     </div>
-    <script src="https://cdn.jsdelivr.net/gh/naptha/[email protected]/dist/tesseract.min.js"></script>
-    <script src="js/index.js"></script>
   </body>
 </html>
diff --git a/file-reader/js/index.js b/file-reader/js/index.js
@@ -1,4 +1,4 @@
-'use strict'
+import { createWorker } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
 
 const inputFile = document.querySelector('input')
 const preview = document.querySelector('img')
@@ -16,9 +16,12 @@ function showText(text) {
   paragraph.textContent = text
 }
 
-function recognizeImageText(file) {
+async function recognizeImageText(file) {
   showText('Recognizing the image text...')
-  Tesseract.recognize(file).then((result) => showText(result.text))
+  const worker = await createWorker('eng')
+  const fileRecognition = await worker.recognize(file)
+  showText(fileRecognition.data.text)
+  worker.terminate()
 }
 
 inputFile.addEventListener('change', (event) => {