Tesseract.js OCR issue

Using JavaScript with Hype
1

Hi Guys,

playing around with tesseract.js following instructions here:

Please see attached demo I am getting the error:

Error in undefined: DataCloneError (DOM Exception 25): The object can not be cloned.
I have set the element ID and name to chip4.
I presume it is something to do with referencing the image ?

Cheers

Steve Warby

ocrTest.zip (182.8 KB)

2

I suspect the issue is that the img element you’re getting is really a div; for image elements in Hype a <div> is constructed and then it uses the background-image CSS property (in most cases). The Tesseract.recognize() says that the Image Argument should be a different type, like an <img> tag.

You could probably get it to work by either supplying a URL in the argument or making your own <img> tag as the inner html of a rectangle element in Hype.

3

@classic12 did you ever manage to get this to work?

4

@Chriswhardy, @classic12

As @jonathan points out the image needs to be referenced.

The simpliest way to get this to work with the current example is to just use the Hype getElementProperty API to get the path to the background image.

  var img = hypeDocument.getElementById("chip4");
	   var imagBG =  hypeDocument.getElementProperty(img, 'background-image')
	 
    		Tesseract.recognize(imagBG)
         .progress(function  (p) { console.log('progress', p)    })
         .then(function (result) { console.log('result', result) })

    var img = hypeDocument.getElementById("chip4");
	   var imagBG =  hypeDocument.getElementProperty(img, 'background-image')
	   var resultOCR_  = hypeDocument.getElementById("resultOCR");
    		Tesseract.recognize(imagBG)
         .progress(function  (p) { console.log('progress', p)   
         resultOCR_.innerHTML = p.status
          })
         .then(function (result) { console.log('result', result) 
         
         
        
         resultOCR_.innerHTML = result.text
         
         })

ocrTest_mhv1.hype.zip (217.3 KB)

3 Likes
5

That’s excellent thanks :slight_smile:

6

I’ve created an OCR reader by retrieving an image from a video stream. Works really well on iPhone. If anyone has any suggestions to make it better then please let me know :slight_smile:

OCR Reader.zip (39.1 KB)

2 Likes