No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Loading Tesseract.js files on the mobile

    Framework
    2
    6
    364
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      Technical last edited by

      I have a problem with Tesseract.js library, specifically with setting path to .js files.

      The docs say in order to use it completely offline I need to load JS files from the local folder like this:

      const { createWorker } = Tesseract;
          const worker = createWorker({
            workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
            langPath: '../lang-data',
            corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
            logger: m => console.log(m),
          });
      

      The above example tells to reference files directly from the node_modules folder. As I figured it out, Quasar won’t let me do this
      I tried to place these files in ‘statics’ folder, ‘public’ folder, but it won’t load these files either way.
      I checked the Tesseract object, it’s loading correctly.

      Where should I place those files so they can be loaded both in browser and an Android device?

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Technical last edited by dobbel

        @Technical said in Loading Tesseract.js files on the mobile:

        Tesseract

        you could just include them in the index.template.html:

        <!-- v2 -->
        <script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
        
        <!-- v1 -->
        <script src='https://unpkg.com/tesseract.js@1.0.19/src/index.js'></script>
        

        The above example tells to reference files directly from the node_modules folder.

        I think you can import files from node-modules files just like this:

        import tesseractJS from "tesseract.js/dist/worker.min.js"
        import tesseractCoreJS from "tesseract.js-core/tesseract-core.wasm.js"
        
        const { createWorker } = Tesseract;
            const worker = createWorker({
              workerPath: tesseractJS ,
              langPath: '../lang-data',
              corePath: tesseractCoreJS,
              logger: m => console.log(m),
            });
        
        T 1 Reply Last reply Reply Quote 0
        • T
          Technical @dobbel last edited by

          @dobbel I think you’ve misunderstood it a bit.

          1. While your approach with referencing packages from will work, the point is to make Tesseract work completely offline, which your suggestion contradicts.
          2. The ‘workerPath’ and ‘corePath’ variables are filenames of the scripts which the library should load, not imported objects.
          dobbel 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @Technical last edited by dobbel

            @Technical

            While your approach with referencing packages from will work, the point is to make Tesseract work completely offline, which your suggestion contradicts.

            If you change the cdn import to a project import you’ll have an offline solution for android. If you want offline support for web, creating a PWA instead of SPA will give you offline support almost out of the box.

            The ‘workerPath’ and ‘corePath’ variables are filenames of the scripts which the library should load, not imported objects.

            Your right about it’s about the ```file names``, What if you copy those 2 files in your public dir you could reach them from there.

            const { createWorker } = Tesseract;
                const worker = createWorker({
                  workerPath: 'tesseract.js/dist/worker.min.js' ,
                  langPath: '../lang-data',
                  corePath: 'tesseract.js-core/tesseract-core.wasm.js',
                  logger: m => console.log(m),
                });
            
            T 1 Reply Last reply Reply Quote 0
            • T
              Technical @dobbel last edited by

              @dobbel I tried the paths you are suggesting and it didn’t work. I can’t seemingly grasp what would be the relative directory when loading the JS files. Is it the root directory, statics folder, the public directory or the path must be relative to the src/pages folder? I’ve tried everything and neither worker.

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @Technical last edited by

                @Technical

                If you place the files in public then they are at "/myfile.js"

                See:
                https://quasar.dev/quasar-cli/handling-assets#Static-Assets---%2Fpublic

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post