7

I am working on an app using React. I want to be able to load a pic and then have Tesseract.js convert it to text. I am using react-dropzone to load the image file and I can add the image to page with an img tag. But when I try to run the ocr using Tesseract It gives me this error:

Uncaught SyntaxError: Unexpected token < at blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1 (anonymous) @ blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1

One post I read said to use a CDN, but then Tesseract is not included in my build process, which throws an error. So I think that I have to include it to use React.

Brian Tatum
  • 177
  • 1
  • 3
  • 11

5 Answers5

9

I had the same issue, and then I had to dig a bit to have it working using the CDN.

Here is what I did, I hope this can help a bit as a workaround:

  1. add <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script> in index.html inside <head></head>
  2. add var Tesseract = window.Tesseract; in App.js

Reference : https://github.com/naptha/tesseract.js/issues/134

Steve Lng C
  • 1,204
  • 1
  • 8
  • 9
2

I know it has been a long time for this question, right now tesseract.js@1.0.16 has fixed the issue, and it can be used with any frameworks like react, vue and angular with no more issues.

P.S. I am one of the contributors for tesseract.js right now, feel free to let me know if you have any issues/requirements. :)

Jerome Wu
  • 71
  • 2
0

Try this one:)

1) Install the node module npm i -S tesseract.ts tesseract.js

2) import Tesseract from 'tesseract.ts'

you are ready to go....

Vaibhav Moradiya
  • 41
  • 6
0

I just made a wrapper based on the Typescript Wrapper, using it with next.js (React) and its working.

TesseractWrapper.js

if (typeof window !== 'undefined') {
  const _instance = window ? require("tesseract.js/dist/tesseract") : require('tesseract.js');
  exports.Tesseract = _instance;
}

then I just

import { Tesseract } from '../../lib/TesseractWrapper';
Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Johan Buys
  • 176
  • 1
  • 5
0

just install tesseract.js

Here is the demo and source code: -

Code

import React, { useState,  } from "react";
import Tesseract from "tesseract.js";

export default function App() {
const [language, setLanguage] = useState("eng");

const [percentage, setPercentage] = useState(0);
const [progressBar, setProgressBar] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [text, setText] = useState("");
const [image, setImage] = useState("");

const { createWorker } = Tesseract;

const [holData, setHolData] = useState();

const onFileChange = (e) => {
  console.log("file :- ", e.target.files[0]);
  setImage(e.target.files[0]);
};

const handleClick = async () => {
setIsLoading(true);

const worker = createWorker({
  logger: (m) => {
    // console.log(m)
    if (m.status === "recognizing text") {
      setProgressBar(m.progress);
      setPercentage(parseInt(m.progress * 100));
    }
  },
});

await worker.load();
await worker.loadLanguage(language);
await worker.initialize(language);
const data = await worker.recognize( image);
console.log(data);
setHolData(data);
setText(data.data.text);
setIsLoading(false);

 downloadPDF(worker)
};

const downloadPDF = async (worker) => {

  const filename = 'Celect-ocr-result.pdf';
  const { data } = await worker.getPDF('CELECT OCR Result');
  const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });

  var fileURL = URL.createObjectURL(blob);
  window.open(fileURL);


if (navigator.msSaveBlob) {
  // IE 10+
  navigator.msSaveBlob(blob, filename);
} else {
  const link = document.createElement('a');
  if (link.download !== undefined) {
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}
};

return (
<div className="container">
  <div className="row h-100">
    <div className="col-md-5 mx-auto d-flex flex-column align-items-center">
      {!isLoading && <h1 className="mt-5 mb-4 pb-5">Image To Text</h1>}

      {/* form */}

      {!isLoading && !text && (
        <>
          <select
            value={language}
            onChange={(e) => setLanguage(e.target.value)}
            className="form-select mb-3"
            aria-label="Default select example"
          >
            <option value="eng">English</option>
            <option value="hin">Hindi</option>
            <option value="urd">Urdu</option>
          </select>

          <div className="col-12 mb-3">
            <input
              className="form-control"
              type="file"
              id="formFile"
              onChange={(e) => onFileChange(e)}
            />
          </div>

          <input
            type="button"
            className="form-control btn btn-primary mt-4"
            value={"Convert"}
            onClick={handleClick}
          />
        </>
      )}

      {/* PROGRESS BAR */}
      {isLoading && (
        <>
          <p className="text-center mt-5">
            Converting :- <progress value={progressBar} max={1} />{" "}
            {percentage}%
          </p>
        </>
      )}

      {/* Text Area */}
      {!isLoading && text && (
        <>
          <textarea
            name=""
            id=""
            cols="30"
            className="form-control"
            value={text}
            onChange={(e) => setText(e.target.value)}
            rows="15"
          ></textarea>

          <p className="mt-5">{text}</p>

          <div className="mt-3 mb-5">
            <button
              onClick={() => downloadPDF()}
              // onClick={handlePrint}

              className="btn btn-primary"
            >
              Download PDF
            </button>
          </div>
        </>
      )}
    </div>
  </div>
</div>
);
}
Deepak Singh
  • 749
  • 4
  • 16