OCR scanner from image to text using Vue.js

user_18723888 0
Viewed 383

I have been working with vue.js and I'm trying to implement OCR scanner to scan image and get text

I have been using tessaract.js which is installed by using

npm i tessaract.js

And installation is also checked in package.json and it is successful, but I have an error

My code is given below

<template>

<div class = "row">        

<div class="col-md-12">
          <!-- <input type="file" id="imageLoader" @change = "updateCanvasImage"/>
          <canvas id="imageCanvas" ref="imageCanvas"></canvas> -->
          <select id="langsel">
  <option value='eng' selected> English </option>
</select>
<input type="file" id="file-1" @change = "imgChange" class="inputfile" />
<img id="selected-image"  src="" />
<div id="log">
    <span id="startPre">  
        <a id="startLink" href="#">Click here to recognize text</a> or choose your own image
    </span>
</div>
        </div>

</div>

</template>

<script>
import Tesseract from 'tesseract.js';


  methods: {
    imgChange(){
      debugger;
      let worker = new Tesseract.TesseractWorker()
worker.recognize(file, $("#langsel").val())
.progress(function(packet){
    console.info(packet)
    progressUpdate(packet)
})
.then(function(data){
    console.log(data)
    progressUpdate({ status: 'done', data: data })
})
    },

}

</script>

But I am getting an error as shown below,

ERROR  Failed to compile with 1 errors                                                 3:36:11 pm

 error  in ./node_modules/tesseract.js/src/createWorker.js

Module parse failed: Unexpected token (22:4)
You may need an appropriate loader to handle this file type.
|   const {
|     logger,
|     ...options
|   } = resolvePaths({
|     ...defaultOptions,

 @ ./node_modules/tesseract.js/src/Tesseract.js 1:21-46
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/storeViewer.vue
 @ ./src/components/storeViewer.vue
 @ ./src/router/index.js
 @ ./src/main.js
 ERROR  Failed to compile with 1 errors                                                 4:45:34 pm

 error  in ./node_modules/tesseract.js/src/index.js

Module parse failed: Unexpected token (24:2)
You may need an appropriate loader to handle this file type.
|   createWorker,
|   setLogging,
|   ...Tesseract,
| };
|

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/storeViewer.vue 57:0-37
 @ ./src/components/storeViewer.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.5.140:8012 webpack/hot/dev-server ./src/main.js

It would be helpful if there is a solution to this issue. Also, if there is an alternative to this method in vue.js please let me know.

vue.js html javascript
1 Answers
// In this code I used tesseract 2.1 .5.
// Link to documentation https: //github.com/jeromewu/tesseract.js-vue-app
import Vue from 'vue';
import {
    createWorker,
    PSM,
    OEM
} from 'tesseract.js';
const worker = createWorker({
    logger: m => console.log(m),
});

new Vue({
    el: '#personification',
    methods: {
        async recognize() {
            await worker.load();
            await worker.loadLanguage('eng');
            await worker.initialize('eng', OEM.LSTM_ONLY);
            await worker.setParameters({
                tessedit_pageseg_mode: PSM.SINGLE_BLOCK,
            });
            const {
                data: {
                    text
               }
            } = await worker.recognize('./img/test.png');
            console.log(text);
        },
    },
});
user_191504590
Related