JavaScript圖片文字識別（OCR）插件Ocrad.js教程

2018-12-05 08:54:39 來源：arsaycode作者：佚名 人氣： 次閱讀 712 條評論

文章主要為大家詳細(xì)介紹了圖片文字識別（OCR）插件Ocrad.js教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下Ocrad.js 相當(dāng)于是 Ocrad 項(xiàng)目的純 JavaScript 版本，使用 Emscri...

文章主要為大家詳細(xì)介紹了圖片文字識別（OCR）插件Ocrad.js教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Ocrad.js 相當(dāng)于是 Ocrad 項(xiàng)目的純 JavaScript 版本，使用 Emscripten 自動轉(zhuǎn)換。這是一個簡單的 OCR （光學(xué)字符識別）程序，可以掃描圖像中的文字回文本。

不像 GOCR.js，Ocrad.js 被設(shè)計(jì)成一個端口，而不是圍繞可執(zhí)行的包裝。這意味著后續(xù)的圖像處理，并不涉及重新初始化可執(zhí)行代碼，以便處理圖像盡可能少的進(jìn)行，因此它需要的時間僅為 GOCR.js 的八分之一。

GOCR.js 已在 github 進(jìn)行開源，下載地址

ocrad.js 的csdn資源下載地址

下面通過一個簡單的 demo 來講解 Ocrad.js。

  1. <html>
  2.  <head>
  3.  <title>業(yè)余草：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 提供了一個全局函數(shù)，ocrad以圖像作為參數(shù)，以字符串的形式返回識別文本。

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

以上就是JavaScript圖片文字識別（OCR）插件Ocrad.js教程的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。