在线手写汉字识别工具

最新推荐文章于 2023-11-27 15:00:00 发布

空中湖

最新推荐文章于 2023-11-27 15:00:00 发布

阅读量1.6k

点赞数 2

分类专栏： js 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/kongzhonghu/article/details/127248106

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

知道汉字长什么样子，但是就是不知道具体是啥字，如果能直接写出来，然后计算机能直接识别出来，岂不是很神奇，现在就介绍一个可以通过浏览器既可以实现在线手写汉字识别的在线工具

废话不多说，上效果图：

是不是很神奇

在线demo地址

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>HanziLookupJS demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body { background-color: #fafafa; font-family: Verdana, sans-serif; padding-top: 70px; }
    div, h1, h2 { position: relative; float: left; box-sizing: border-box; height: auto; overflow: auto; width: 100%; margin: 0; }
    h1 { margin-bottom: 8px; }
    h2 { font-weight: normal; }
    .content, .header { 
      width: 810px; margin: 0 auto; float: none; background-color: #6688aa; padding: 20px; color: #f0f0f0;
      border-radius: 8px;
    }
    .header { text-align: center; margin-bottom: 20px; }
    .header a { color: #fce566; text-decoration: none; }
    .colLeft { width: 270px; }
    .colRight { width: 500px; padding-left: 30px; }
    .drawingBoard { width: 250px; height: 250px; cursor: crosshair; clear: both; overflow: hidden; background-color: #fafafa; }
    .drawingBoard span { display: none; }
    .drawingBoard.loading { background-color: #f0f0f0; }
    .drawingBoard.loading span { display: inline; color: #606060; }
    .commands { width: 250px; margin-top: 3px; }
    .cmd { width: 122px; background-color: #fce7c0; text-align: center; cursor: default; padding: 3px; color: #606060; }
    .cmd.cmdUndo { float: right; }
    .cmd:hover { background-color: #f1d7a6; }
    .charPicker { 
      border: 1px solid #a0a0a0; padding: 3px; height: 70px; width: 400px; font-size: 48px; background-color: #fafafa; overflow: hidden; 
      color: #606060;
    }
    .charPicker span { cursor: default; }
    .hanziLookupChars { margin-bottom: 20px; }
  </style>
</head>
<body>
  <div class="header">
    <h1>HanziLookupJS demo</h1>
    <a href="https://github.com/gugray/HanziLookupJS">github.com/gugray/HanziLookupJS</a>
  </div>
  <div class="content">
    <div class="colLeft">
      <h1>Stroke input</h1>
      <div class="drawingBoard loading"><span>Loading...</span></div>
      <div class="commands">
        <div class="cmd cmdUndo">Undo</div>
        <div class="cmd cmdClear">Clear</div><br/>
      </div>
    </div>
    <div class="colRight">
      <h1>Recognized characters</h1>
      <h2>Original HanziLookup data</h2>
      <div class="charPicker hanziLookupChars"></div>
      <h2>Make Me a Hanzi data</h2>
      <div class="charPicker mmahLookupChars"></div>
    </div>  
  </div>

  <script src="./library/lib/jquery-3.1.1.min.js"></script>
  <script src="./dist/hanzilookup.min.js"></script>
  <script>
    var hanziLookupDemoApp = (function () {
      var _filesToLoad;
      var _drawingBoard;

      $(document).ready(function () {
        // Only fetch data (large, takes long) when the page has loaded
        _filesToLoad = 2;
        HanziLookup.init("mmah", "./dist/mmah.json", fileLoaded);
        HanziLookup.init("orig", "./dist/orig.json", fileLoaded);
      });

      // Initializes mini-app once all scripts have loaded
      function fileLoaded(success) {
        if (!success) {
          _filesToLoad = -1;
          $(".drawingBoard span").text("Failed to load data.");
          return;
        }
        --_filesToLoad;
        if (_filesToLoad != 0) return;
        // All data scripts loaded
        $(".drawingBoard").removeClass("loading");
        // Create handwriting canvas (this is optional, you can bring your own)
        _drawingBoard = HanziLookup.DrawingBoard($(".drawingBoard").first(), lookup);
        // Undo/redo commands - have to do with input
        $(".cmdUndo").click(function (evt) {
          _drawingBoard.undoStroke();
          _drawingBoard.redraw();
          lookup();
        });
        $(".cmdClear").click(function (evt) {
          _drawingBoard.clearCanvas();
          _drawingBoard.redraw();
          lookup();
        });
      }

      // Fetches hand-drawn input from drawing board and looks up Hanzi
      function lookup() {
        // Decompose character from drawing board
        var analyzedChar = new HanziLookup.AnalyzedCharacter(_drawingBoard.cloneStrokes());
        // Look up with original HanziLookup data
        var matcherOrig = new HanziLookup.Matcher("orig");
        matcherOrig.match(analyzedChar, 8, function(matches) {
          showResults($(".hanziLookupChars"), matches);
        });
        // Look up with MMAH data
        var matcherMMAH = new HanziLookup.Matcher("mmah");
        matcherMMAH.match(analyzedChar, 8, function(matches) {
          showResults($(".mmahLookupChars"), matches);
        });
      }

      // Populates UI with (ordered) Hanzi matches
      function showResults(elmHost, matches) {
        elmHost.html("");
        for (var i = 0; i != matches.length; ++i) {
          elmHost.append("<span>" + matches[i].character + "</span>");
        }
      }
    })();
  </script>
</body>
</html>