tesseract.js: Current CDN Example Not Working

Hi. I’m trying to conduct a very simple test using just a single HTML file and by including the tesseract.js script using the CDN source in the documentation:

<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

My HTML file is simple:

<html>
    <head>
        <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
        <title>Tesseract Test</title>
    </head>
    <body>
        <label for="fileInput">Choose File to OCR:</label>
        <input type="file" id="fileInput" name="fileInput"/>
        <br />
        <br />
        <div id="document-content">
        </div>
    </body>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            var fileInput = document.getElementById('fileInput');
            fileInput.addEventListener('change', handleInputChange);
        });

        function handleInputChange(event){
            var input = event.target;
            var file = input.files[0];
            console.log(file);
            Tesseract.recognize(file)
                .progress(function(message){
                    console.log(message);
                })
                .then(function(result){
                    var contentArea = document.getElementById('document-content');
                    console.log(result);
                })
                .catch(function(err){
                    console.error(err);
                });
        }
    </script>
</html>

But if I try to add an image, nothing happens in the console or anywhere else. This is also true if I clone the repository and instead load tesseract.js from the dist directory.

I see that the main (non-github) website for the project uses the CDN version 1.0.7, so I tried using that source instead. It came to life and started reporting back progress, but then threw the following error:

tesseract_example.html:27 Object {status: "loading tesseract core", progress: 0}
tesseract_example.html:27 Object {status: "loading tesseract core", progress: 1}
tesseract_example.html:27 Object {status: "initializing tesseract", progress: 0}
index.js:10 pre-main prep time: 65 ms
tesseract_example.html:27 Object {status: "initializing tesseract", progress: 1}
worker.js:11953 Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': An object could not be cloned.(…)

(anonymous function)	@	worker.js:11953
respond	@	worker.js:12185
dispatchHandlers	@	worker.js:12205
(anonymous function)	@	worker.js:11952

Am I just doing this wrong somehow?

(Using Chrome 54 in OSX 10.11.)

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (2 by maintainers)

Most upvoted comments

Appearantly this happens only when you trying access the page directly without a webserver.

iwollmann on Nov 16, 2016

I meet the same error by using local file. Finally, the problem can be solved for me by using Chrome Extension Web Server for Chrome

a4027971 on Aug 3, 2017

Maybe you should try to request all the files from web server. For example, Apache, Tomcat.

lgcagithub on Feb 15, 2017

@iwollmann Is that really the solution for Chrome? It works fine in Firefox without a web server.

MacroChip on Dec 6, 2016

Exactly @MacroChip, that’s what i said, you need to access through a web server.

iwollmann on Dec 5, 2016