'OCR scanner from image to text using Vue.js

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.

javascripthtmlvue.jsjavaspring-bootgradlespring-native


Solution 1:[1]

// 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);
        },
    },
});

Solution 2:[2]

It seems like you need to provide a dummy value in your application.yml and pass the correct environment variable at runtime.

Dummy variable:

server:
   port: 8080

If you are using docker you would pass it on runtime like:

docker-compose.yml

version: '3.8'
services:
  demo:
    image: demo
    build:
      context: ./
    container_name: demo
    environment:
      - server.port=8080

You could also use a local .env file and pass it like:

.env

PORT=8080

docker-compose.yml

version: '3.8'
services:
  demo:
    image: demo
    build:
      context: ./
    container_name: demo
    environment:
      - server.port=${PORT}

For an optional property like server.port you dont event need to create a dummy in your application.yml file. You could just set it on runtime and it will work.

I'm not shure about your sentry.dsn property, maybe you need to create a dummy for this to work and override it on runtime like in the examples above.

Update:

Another aproach would be to set the $PORT environment variable on the system building the image (docker or local). Maybe this would work also. I would appreciate your feedback.

In the dockerfile you could set environment variables wiht the ENV statement like ENV NAME=VALUE. On Linux you could just run export NAME=VALUE

Source: https://github.com/spring-projects-experimental/spring-native/issues/1470

Update 2:

I did some tests with Spring Native in combination with environment variables. My prefered advice is to delete the application.yml before building the native-image and pass all the required variables at runtime.

For your build to succeed, you maybe need to disable the tests like: mvn -Pnative package -DskipTests=true

You could take a look at my sample repository: https://github.com/swissbuechi/spring-native-demo

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Altynbek Mambetov
Solution 2

Related Questions