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教程的全部內容，希望對大家的學習有所幫助。

相關文章