javascripttesseracttesseract.js

Tessearct.js not working: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported


I am running this on Chrome and I use a node to set up a server.

Here is my HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/async/3.2.0/async.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
  <script src="js/canvas-to-blob.min.js"></script>
  <title>Slicer</title>
    <script type="module" src="sketch.js"></script>
</head>
<body></body>

my javascript (copied from github.com/naptha/tesseract.js/blob/master/docs/examples.md)

const { createWorker } = require('tesseract.js');
const worker = createWorker();
const rectangle = { left: 0, top: 0, width: 500, height: 250 };

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

My error is: Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Here is what I have tried:

What can I do to fix this?


Solution

  • Please use the tesseract.js 2.0.0 version.