JavaScript图片文字识别（OCR）插件Ocrad.js教程

北极の风 2018-12-05 08:54:39 来源: arsaycode
文章主要为大家详细介绍了图片文字识别（OCR）插件Ocrad.js教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Ocrad.js 相当于是 Ocrad 项目的纯 JavaScript 版本，使用 Emscripten 自动转换。这是一个简单的 OCR （光学字符识别）程序，可以扫描图像中的文字回文本。

不像 GOCR.js，Ocrad.js 被设计成一个端口，而不是围绕可执行的包装。这意味着后续的图像处理，并不涉及重新初始化可执行代码，以便处理图像尽可能少的进行，因此它需要的时间仅为 GOCR.js 的八分之一。

GOCR.js 已在 github 进行开源，下载地址

ocrad.js 的csdn资源下载地址

下面通过一个简单的 demo 来讲解 Ocrad.js。

  1. <html>
  2.  <head>
  3.  <title>业余草：www.xttblog.com</title>
  4.  <style>
  5.  body {
  6.  background: whiteSmoke;
  7.  font-family: sans-serif;
  8.  margin: 30px;
  9.  }
  10.  #transcription, #pic {
  11.  background: white;
  12.  display: inline-block;
  13.  border: 1px solid #ddd;
  14.  margin: 10px;
  15.  }
  16.  #transcription {
  17.  font-size: 30px;
  18.  padding: 30px;
  19.  min-width: 300px;
  20.  color: gray;
  21.  }
  22.  #transcription.done {
  23.  color: black;
  24.  }
  25.  #main {
  26.  display: flex;
  27.  }
  28.  </style>
  29.  </head>
  30.  <body>
  31.  <h1>Simple Ocrad.js Example</h1>
  32.  <script src="../../ocrad.js"></script>
  33.  <script>
  34.  function recognize_image(){
  35.  document.getElementById('transcription').innerText = "(Recognizing...)"
  36.  OCRAD(document.getElementById("pic"), function(text){
  37.  document.getElementById('transcription').className = "done"
  38.  document.getElementById('transcription').innerText = text;
  39.  })
  40.  }
  41.  </script>
  42.  <div id="main">
  43.  <!-- CODE大全：www.codedq.net -->
  44.  <img id="pic" src="img/message.png" onload="recognize_image()">
  45.  <div id="transcription"></div>
  46.  </div>
  47.  </body>
  48. </html>

ocrad.js 的使用很简单，首先需要引入 ocrad.js 文件。

  1. <script src="ocrad.js"></script>

ocrad.js 提供了一个全局函数，ocrad以图像作为参数，以字符串的形式返回识别文本。

  1. var string = OCRAD(image);
  2. alert(string);

以上就是JavaScript图片文字识别（OCR）插件Ocrad.js教程的全部内容，希望对大家的学习有所帮助。

JavaScript编程开发