Chrome+Node服务器环境下Tesseract.js canvas污染报错修复求助

我在Chrome浏览器中通过Node搭建服务器运行Tesseract.js，相关代码如下：

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>

JavaScript代码（来自Tesseract.js官方示例） #

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();
})();

运行报错 #

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

已尝试无效的方法 #

• 添加crossOrigin = "Anonymous"
• 下载并引入blueimp-canvas-to-blob
• 在终端单独运行代码（出现错误：RuntimeError: abort(TypeError: Failed to parse URL from /path_to_project/node_modules/tesseract.js-core/tesseract-core.wasm)，文件实际存在）
• 下载并使用canvas-to-blob

解决方法 #

1. 确保图片资源的跨域配置正确 #

如果imageURL是外部域名的图片，仅给图片元素加crossOrigin="anonymous"还不够：

• 要在创建图片元素时就设置crossOrigin属性，不能等图片加载后再设置：

  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = imageURL;
  

• 同时确认图片所在服务器的响应头包含Access-Control-Allow-Origin: *（或你的域名），否则浏览器仍会认为画布被污染。

2. 改用本地图片资源 #

如果外部图片的跨域配置无法修改，建议将图片放在Node服务器的静态资源目录下（比如public/images），用本地相对路径访问，避免跨域问题：

const imageURL = '/images/your-image.png';

3. 调整Tesseract.js的Worker加载方式 #

你用的是Tesseract.js v2版本，在浏览器环境下不需要用require，直接使用全局的Tesseract对象即可，修改JS代码：

// 去掉require，直接用全局对象
const { createWorker } = Tesseract;
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');
  // 确保传入的是已经加载完成的img元素，而非URL
  const { data: { text } } = await worker.recognize(img, { rectangle });
  console.log(text);
  await worker.terminate();
})();

4. 处理Node端单独运行的WASM路径问题 #

如果要在Node环境运行，需要指定Tesseract.js的核心路径，避免WASM加载错误：

const path = require('path');
const { createWorker } = require('tesseract.js');
const worker = createWorker({
  corePath: path.join(__dirname, 'node_modules/tesseract.js-core/tesseract-core.wasm'),
});

内容的提问来源于stack exchange，提问作者ba_