Using Tesseract.js to process local files is not supported

When utilizing tesseract.js on a URL, it functions correctly. However, when attempting to run it on a local file, I encounter errors. How can I troubleshoot this issue?

I am currently using tesseract.js v2.1.0 and below is the code snippet:

const { createWorker } = require('tesseract.js');

const worker = createWorker({
  logger: m => console.log(m), // Include logger here
});

(async () => {
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize('download.png');
  console.log(text);
  await worker.terminate();
})();

Answer №1

If you're looking to incorporate local images into tesseract, it's essential to load them using the input tag. Here's a functional example to guide you through.

HTML

<input type="file" id="input_image" accept="image/*">

JavaScript

const input_image = document.getElementById("input_image");

const offscreen_canvas = new OffscreenCanvas(0, 0);
const offscreen_canvas_context = offscreen_canvas.getContext("d2");

input_image.addEventListener("change", () => {
  var file = input_image.files[0];
  if (file == undefined) return;
  var reader = new FileReader();
  reader.onload = function (event) {
    const reader_image = event.target.result;
    const image = new Image();
    image.onload = function () {
      offscreen_canvas.width = image.width;
      offscreen_canvas.height = image.height;
      offscreen_canvas_context.drawImage(image, 0, 0);
      offscreen_canvas.convertToBlob().then((blob) => {
        Tesseract.recognize(blob, "eng", {
          logger: (m) => console.log(m)
        }).then(({ data: { text } }) => {
          console.log(text);
        });
      });
    };
    image.src = reader_image;
    };
  reader.readAsDataURL(file);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the power of Jade and Angular through implementing a for loop within a table structure

I'm brand new to using Jade and Angular, and I could really use a hint from someone more experienced. ... - for (var i = 0; i < p.length; i++) tr td= i + 1 td= price(value='p[i].somedbstuff') ... I want the la ...

In Node.js and Express, it is important to note that a variable must be declared before

When I use the express action get('items'), I encounter an issue while trying to call an external JSON-API and display the API response in my local response. The error that I am currently facing states that the items variable is not defined with ...

Transforming a string into JSON with proper sanitization

When web scraping, the website returns a string like this on get request: jQuery18305426675335038453_1429531451051({"d":[{"__metadata":"cool"}]}) The complete code snippet is provided below: var baseUrl = "http://SOMEURL.COM?spatialFilter=nearby(52.4795 ...

Multiple conditions in TypeScript resulting in a function output

I am working on developing a function that can return different types based on its parameters. Similar to the function below, but I want it to be more streamlined and efficient (using generics without union types as results) type ResultType = { get: Get ...

What could be causing the script to display the object's content inaccurately?

Below is the code for the client side: import {useEffect,useState} from 'react'; import io from 'socket.io-client'; import Peer from './Peer'; export default function TestMeeting(){ let peerName; const [peerList,setPee ...

What are the steps to incorporate a MenuItem within a div container instead of being a direct child of the Select component in Material-UI?

Embarking on my MUI journey, I am exploring how to utilize Select and MenuItem in tandem to create a checked dropdown functionality with the help of this reference link. My goal is to structure a header, body div for MenuItems, and a footer inside the sele ...

Tips for testing and verifying the call to a specific Firebase method within a function using Jest

Within the file App.ts, I am utilizing the method firebase.auth().signInWithEmailAndPassword(email, password). Now, my objective is to conduct a unit test to ensure that when the myAuthenticationPlugin.authenticate(email, password) method is invoked from ...

Avoid using jQuery to trigger the .change event

I am dealing with two separate functions: one updates an input field, and the other shows an image if the input value is a valid image. Unfortunately, I cannot combine them into a single function because they operate on different pages (I have just placed ...

Tips for maintaining the functionality of IFrame?

I am encountering an issue with tracking clicks on a div that contains an IFrame. While the tracking functionality works, it seems to interfere with the IFrame's functionality. Is there a way to resolve this and make both functionalities work simultan ...

When the onClick event is triggered, Next.js will dynamically render a new

Looking to display a larger version of an image in a new div upon click? Here are four different methods I've tested: Render div on Click function zoom_img (event) { console.log(event.target); console.log(event.target['data-loaded-src&a ...

AngularJS - issue with directive functionality on dynamically inserted classes

Check out this plnkr - I've got a button that toggles the class toggled on the body element. I've also developed a directive to trigger an alert when the toggled class is applied to the body element, but for some reason it's not working. H ...

What is the best way to incorporate my CSS file into an HTML file when using Express?

When I try to host my html file using Express, it seems that my CSS is not getting applied. Why is this happening and what is the best way to include my CSS file with Express? const express = require('express'); const bodyParser = require('b ...

"Utilizing Vuex for a detailed and structured approach to organization

Currently, I am tackling a rather extensive project and my aim is to divide Vuex modules into as many segments as feasible. Specifically, I intend to segregate the API functionality from the UI, maintaining a clear distinction between server-sourced data a ...

How to access a global variable within an Angular application

Using node express and angular, I have set up a route in my express app.js where I pass a variable to the rendered page: app.get('/test', function(req, res){ res.render('test', { user: 12345 }); }); Within my 'test' view, ...

What is the best way to move information between two functions using jQuery?

When using the sortable jQuery, how can I pass variable data from one function to another? I have the following: start:function(event,ui){ var data="xyz";} and receive:function(event,ui){ } I am looking to retrieve the value of var data in the receive ...

Identifying the user's location within the application and dynamically loading various Angular scripts

Currently, I am working on a large-scale web application using Laravel and Angular. In this project, I have integrated various angular modules that come with their own controllers, directives, and views. One challenge I am facing is the need to load diffe ...

Dynamic JavaScript button control based on time

I am currently working on an app and my goal is to have a feature where the user clicks a button, it will then disappear and only reappear after 24 hours. Here's my progress so far. <div class="buttons"> <p><button onclick="hide(); ...

Rotating Points in Three.js

I'm currently experimenting with a particle system project and I would like to incorporate a slight delay in the rotation of my Points Object in three.js. At the moment, I am using D3.js linear scale which results in a 1:1 rotation. This means that if ...

When making an Ajax call, the response is in JSON format when executed locally, but switches to

Whenever I send an ajax request and retrieve data, the response varies depending on where I execute the code. When I test the web page using Visual Studio and inspect the output in developer tools, I see JSON format like {"d":{"__type":"WebService+MyObject ...

Why is it that the reduce function is not returning the object I expected?

[['id', '1111'], ['name', 'aaaaa']] I came across this list. { id: '1111', name: 'aaaa' } Now, I would like to transform the list into a different format. My attempt to convert the list into t ...