createWorker.js:173 Uncaught Error: TypeError: (intermediate value)(intermediate value)(intermediate value).map is not a function

Question

所以我必须在发票上执行 OCR ，打印选择的像素并将选择的文本显示到 textare.

但是我收到错误createWorker.js:173 Uncaught Error: TypeError: (intermediate value)(intermediate value)(intermediate value).map is not a function

我是新手，谁能帮忙

`import React,{ useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import RegionSelect from "react-region-select";
import "../src/style.css";
import Tesseract from "tesseract.js";
import * as pdfjsLib from "pdfjs-dist";

pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.js`;


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickableRegions: [
        {
          x: 9.565217391304348,
          y: 34.195402298850574,
          width: 81.30434782608695,
          height: 6.3218390804597675,
          new: false,
          data: { index: 0 },
          isChanging: false
        }
      ]
    };
  }
  onChange = (regions) => {
    console.log("​App -> onChange -> regions", regions);

    this.setState({
      regions: regions
    });
  };
  changeRegionData(index, event) {
    console.log("​App -> changeRegionData -> index", index);
    const region = this.state.regions[index];
    console.log(
      "​App -> changeRegionData -> this.state.regions",
      this.state.regions
    );
    let color;
    switch (event.target.value) {
      case "1":
        color = "rgba(0, 255, 0, 0.5)";
        break;
      case "2":
        color = "rgba(0, 0, 255, 0.5)";
        break;
      case "3":
        color = "rgba(255, 0, 0, 0.5)";
        break;
      default:
        color = "rgba(0, 0, 0, 0.5)";
    }

    region.data.regionStyle = {
      background: color
    };
    this.onChange([
      ...this.state.regions.slice(0, index),
      Object.assign({}, region, {
        data: Object.assign({}, region.data, { dataType: event.target.value })
      }),
      ...this.state.regions.slice(index + 1)
    ]);
  }
  actionDeleteRegion = (regionIdx) => {
    console.log("​regionIdx", regionIdx);
    const filteredRegion = this.state.regions.filter(
      (reg) => reg.data.index !== regionIdx
    );
    this.setState({ regions: filteredRegion });
  };
  regionRenderer = (regionProps) => {
    if (!regionProps.isChanging) {
      console.log("​regionRenderer -> regionProps", regionProps);
      return (
        <div>
          <div style={{ position: "absolute", right: 0, top: "-25px" }}>
            <button
              onClick={() => this.actionDeleteRegion(regionProps.data.index)}
            >
              Cancel
            </button>
          </div>
          <div style={{ position: "absolute", right: 0, bottom: "-30px" }}>
            <textarea
              disabled
              id="Mytextarea"
              style={{ top: "20px", resize: "none" }}
              value={this.state.extractedText}
            />

            <select>
              <option value="inv1">inv total</option>
              <option value="inv2">addre</option>
              <option value="inv3">inv number</option>
            </select>

            <button onClick={this.actionAddRegion}>Save</button>
          </div>
        </div>
      );
    }
  };

  actionAddRegion = () => {
    const selectedRegion = this.state.regions[this.state.regions.length - 1];
    console.log(selectedRegion.x, selectedRegion.y, selectedRegion.width);
    const canvas = document.createElement("canvas");
    const img = new Image();

    img.onload = () => {
      const ctx = canvas.getContext("2d");
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);

      const { x, y, width, height } = selectedRegion;

      const imageData = ctx.getImageData(
        (x / 100) * img.width,
        (y / 100) * img.height,
        (width / 100) * img.width,
        (height / 100) * img.height
      );
      console.log("Image data: " + imageData)
      Tesseract.recognize(imageData, { tessedit_char_whitelist: "0123456789" })
        .then((result) => {
          const text = result.text.trim();
          console.log("and here is the text");
          console.log(text);
          this.setState({ extractedText: text });
        })
        .catch((error) => {
          console.log("errrp")
          console.error(error);
        });
    };

    img.src = require('../src/invoice.jpg')
    alert("Extracting text...");
  };

  renderClickableRegions() {
    const { regions } = this.state;
    return regions.map((c) => (
      <div
        style={{
          position: "absolute",
          width: `${c.width}%`,
          height: `${c.height}%`,
          top: `${c.y}%`,
          left: `${c.x}%`,
          background: c.data.regionStyle?.background ?? "rgba(0, 255, 255, 0.5)"
        }}
      />
    ));
  }

  render() {
    const regionStyle = {
      background: "rgba(0, 255, 0, 0.5)"
    };

    return (
      <React.Fragment>
        <br />
        <br />
        <div style={{ display: "flex" }}>
          <div
            style={{
              flexGrow: 1,
              flexShrink: 1,
              width: "50%",
              left: "0",
              // padding: 15,
              position: "absolute",
              display: "inline-block"
            }}
          >
            <RegionSelect
              regions={this.state.regions}
              regionStyle={regionStyle}
              constraint
              onChange={this.onChange}
              regionRenderer={this.regionRenderer}
              // style={{ width: "50%" }}
            >
              <img
                src={require('../src/invoice.jpg')}
                width="500px"
                height="500px"
              />
              {/* {this.renderClickableRegions()} */}
            </RegionSelect>
          </div>
          <div
            style={{
              flexGrow: 1,
              flexShrink: 1,
              width: "50%",
              left: "50%",
              // padding: 15,
              position: "absolute",
              display: "inline-block"
            }}
          ></div>
        </div>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);`