求助：TypeError: map不是函数报错，Tesseract.js无法存储识别文字

错误原因 #

1. Canvas未设置有效宽高：你的canvas元素默认宽高为0x0，调用ctx.drawImage时绘制的是空图像，getImageData得到无效数据，导致Tesseract内部处理时触发数组操作错误。
2. Tesseract.recognize 参数格式错误：Tesseract.js v4.x 中，recognize方法的正确参数顺序是：图像源、语言代码字符串、配置对象。你将配置对象作为第二个参数传入，导致内部解析逻辑混乱，进而触发map相关错误。
3. 关于createWorker.js：这是Tesseract.js的内部文件，负责创建和管理OCR识别的Worker线程，你无需直接修改它，问题根源在你的调用代码上。

修复后的完整代码 #

<html>
  <head>
    <script src="https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js"></script>
    <script>
        const video = document.createElement("video");
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let imageData;
  
        navigator.mediaDevices
          .getDisplayMedia({ video: true })
          .then(stream => {
            video.srcObject = stream;
            // 监听视频元数据加载，获取实际宽高
            video.addEventListener('loadedmetadata', () => {
              canvas.width = video.videoWidth;
              canvas.height = video.videoHeight;
              video.play();

              setInterval(() => {
                // 确保视频处于播放状态且canvas有有效尺寸
                if (!video.paused && canvas.width > 0 && canvas.height > 0) {
                  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                  imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                  processImage();
                }
              }, 1000);
            });
          });
  
        const processImage = () => {
          // 修正参数顺序：图像源、语言代码、配置对象
          Tesseract.recognize(imageData, 'eng', {
            // 可按需添加额外配置，如识别模式、白名单等
          })
            .then(result => {
              const text = result.text;
              sendToServer(text.split("\n"));
            })
            .catch(err => console.error(err));
        };
  
        const sendToServer = text => {
          fetch("https://example.com/text_parse", {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({ textArray: text })
          })
            .then(res => res.json())
            .then(data => console.log("Success:", data))
            .catch(err => console.error(err));
        };
      </script>
    </head>
    <body>
    </body>
  </html>

关键修改说明 #

• 给canvas设置与视频流匹配的宽高：通过video.videoWidth和video.videoHeight获取实际视频尺寸，避免绘制空图像。
• 修正Tesseract.recognize调用参数：将语言代码'eng'作为第二个参数，配置对象作为可选的第三个参数。
• 添加状态检查：避免在视频未加载完成、未播放或canvas尺寸无效时执行绘制和识别操作，减少无效调用。

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