如何使用 JavaScript 从图像中提取文本

Javascript是一种完整的计算机语言（尽管有人批评它），自从NodeJS问世以来，简单地说Javascript不会与社区沟通，无论你是在浏览器中还是在服务器上这样做。

您描述的功能是光学字符识别 （OCR）。Javacript 有内置的吗？没有。这是对你问题的简短回答。

可以使用Javascript语言来做到这一点吗？是的，但你必须努力让它工作。正如您已经发现的那样，有一些像 Ocrad 这样的项目.js它们在 Javascript 中实现了 OCR 算法并直接在您的浏览器中运行。该演示似乎对我来说效果很好。想详细说明您遇到的具体问题吗？

另一方面，更明显的一端是，如果你在服务器上运行Javascript，那么你可以使用Javascript编写OCR代码（很像Ocrad），或者你可以将其委托给一些你可以下载并在服务器上运行的应用程序，如OCR4Linux。

如果您想要一个在浏览器中工作的客户端解决方案（仅导入 cdn），您有两种可能性：

• Tesseract，非常强大，但无法读取表格/网格中的文本https://tesseract-ocr.github.io/tessdoc/ImproveQuality.html#tables-recognitions已知 tesseract 在识别表中的文本/数据方面存在问题

• Ocrad.js，通常具有较弱的识别能力，您可以预处理图像（所以对我来说没关系），但是已经解决了表格/网格的这个大问题！为此，我编写了一个代码 https://github.com/desousar/OcradJS_use_strict我更正了原始存储库代码 （https://github.com/antimatter15/ocrad.js），以避免在"使用严格"环境中出现八进制文字

这是我的 Ocrad 代码.js

<!--   <script src="https://antimatter15.com/ocrad.js/ocrad.js"></script> -->
<script src="https://cdn.jsdelivr.net/gh/desousar/OcradJS_use_strict@v2/ocrad.js"></script>
  <h1>Utilisation d'OCRad.js avec une image</h1>
  <input type="file" id="imageInput">
  <pre id="result"></pre>
  
  <script>
    function readImage(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var image = new Image();
          
          image.onload = function() {
            
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const upscaleBy = 1
            canvas.width = image.width * upscaleBy;
            canvas.height = image.height * upscaleBy;
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
           const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < imageData.data.length; i += 4) {
              const r = imageData.data[i];
              const g = imageData.data[i + 1];
              const b = imageData.data[i + 2];
              const brightness = (r + g + b) / 3;
              const bw = brightness < 128 ? brightness : 255;
              imageData.data[i] = bw;
              imageData.data[i + 1] = bw;
              imageData.data[i + 2] = bw;
            }
            ctx.putImageData(imageData, 0, 0);
            
            const base64Image = canvas.toDataURL('image/jpeg', 1);
            
            const image2 = new Image();
            image2.onload = function() {
              const result = OCRAD(image2);
              document.getElementById('result').textContent = result;
            };
            image2.src = base64Image;
          };
          
          image.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
      }
    }
    document.getElementById('imageInput').addEventListener('change', function() {
      readImage(this);
    });
  </script>

这是我的Tesseract代码

await Promise.all([
  // Import Tesseract.js
  import('https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js')
])
async function imageProcess(file){
  // Load image and convert it to an image object
  const img = new Image();
  img.src = URL.createObjectURL(file);
  
  // Wait for the image to load
  await new Promise(resolve => {
    img.onload = resolve;
  });
  // Create a canvas to draw the enlarged image
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const upscaleBy = 2
  // Enlarge the image by doubling its size
  canvas.width = img.width * upscaleBy;
  canvas.height = img.height * upscaleBy;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  // Convert canvas to Blob object
  const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 1));
  // Use Tesseract.js to recognize the text in the enlarged image
  const result = await Tesseract.recognize(blob, 'eng');
  const text = result?.data?.text;
  
  return text;
}