原标题：Why does tesseract not work in browser with react?
I am new to react and a begginer with node.js. I am trying to create an app that uses the tesseract package, but I m running into a strange error: tesseract_js__WEBPACK_IMPORTED_MODULE_3___default.a.init is not a function
I am using node 12, and using this tutorial for how to use tesseract with react.
my app.js file looks like this:
import ImageUploader from react-images-upload
import React, { useState } from "react";
import Tesseract from "tesseract.js"
const UploadComponent = props => (
)
const App = () => {
const [progress, setProgress ] = useState( getUpload )
const [errorMessage, setErrorMessage ] = useState( )
const onImage = async (failedImages, successImages) => {
setProgress( scanning )
try {
console.log( successImages , successImages)
const parts = successImages[0].split( ; )
const mime = parts[0].split( : )[1]
const name = parts[1].split( = )[1]
const data = parts[2]
console.log("mime: " + mime +", name: " + name + ", data: " + data)
const fileUrl = "~/Downloads/"+name
console.log("fileUrl: " + fileUrl)
let image = new Buffer(data, base64 );
Tesseract.init("eng");
// set image
Tesseract.setImage(image);
console.log("set image...")
Tesseract.recognize({ logger: m => console.log(m) }).then((data) => {
console.log(data);
}).catch((error) => {
console.log("error message: " + error.message)
})
} catch (error) {
console.log("error in scan: " + error.message)
setErrorMessage(error.message)
setProgress( uploadError )
}
setProgress( scanned )
}
const content = () => {
switch(progress){
case getUpload :
return
case scanning :
return
Scanning...
case scanned :
return
Scanned
case uploadError :
return (
<>
Error Message = {errorMessage}
please upload an image
)
}
}
return (
Text Scanner Website
{content()}
)
}
export default App;
When I run npm start, and then hit localhost:3000 in my browswer, and then select an image file using my file selector, I get the above error. what am I doing wrong? I thought tesseract was supposed to work nicely in the browser, and that my setup with es6 syntax and webpack was all standard. Any help would be greatly appreciated!
Thank you,
Paul
问题回答
Try react-tesseract, A wrapper library for Tesseract.js for easy integration. It provides a React hook useTesseract along with some helper functions.
example usage:
import React, { useState } from react ;
import { useTesseract } from react-tesseract ;
const App = () => {
const [imageUrl, setImageUrl] = useState( );
const { recognize, error, result, isRecognizing } = useTesseract();
const handleRecognize = async () => {
if (imageUrl) {
await recognize(imageUrl, {
language: eng+ara , // Use English and Arabic
errorHandler: (err) => console.error(err), // Custom error handler
tessedit_ocr_engine_mode: 1, // Use neural net LSTM engine only
tessedit_pageseg_mode: 1, // Assume a single uniform block of text
// ... any other Tesseract.js options
});
}
};
const handleImageChange = (e) => {
setImageUrl(URL.createObjectURL(e.target.files[0]));
};
return (
I have been using tesseract-ocr (in .NET) which has been working well. The images i feed it are ascii only (A-z0-9). Is there a way i can tell it not to use special characters?
I want to remove rectangles etc that enclose text in a screenshot image, so that I can perform optical character recognition to get accurate text from the screenshot.
Background:
I doing this to ...
Do you know of step by step guide of how to use bins and dlls in http://www.pixel-technology.com/freeware/tessnet2/
I spent 2 days trying to use this by when compiling i am being asked for a dll that ...
I recently saw someone with a T-shirt with some Perl code on the back. I took a photograph of it and cropped out the code:
Next I tried to extract the code from the image via OCR, so I installed ...
I m using Tesseract for my letter recognition project and currently the recognitions is quite good. The image processing part was done using OpenCv libraries.
The letters are hand written.But there ...
I ve searched around for open source OCR for Chinese. But without any luck there rarely seems to be some open source OCR (for Chinese) that are usable.
So I am here wondering:
Is there any open ...
I am trying to perform recognition of a german text with fraktur typeface with ocropus but It doesn t seem to be using deu-f package.
Here are the steps I performed.
Compiled and installed tesseract ...
I have this image:
I want to read it to a string using python, which I didn t think would be that hard. I came upon tesseract, and then a wrapper for python scripts using tesseract.
So I started ...
