JavaScript圖片文字識別（OCR）外掛Ocrad.js教程

佚名發表於2018-12-05
JavaScriptJS
文章主要為大家詳細介紹了圖片文字識別（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教程的全部內容，希望對大家的學習有所幫助。

相關文章