在线手写汉字识别工具 |
您所在的位置：网站首页 › 在线手写识别字免费 › 在线手写汉字识别工具 |
在线手写汉字识别工具
|
知道汉字长什么样子，但是就是不知道具体是啥字，如果能直接写出来，然后计算机能直接识别出来，岂不是很神奇，现在就介绍一个可以通过浏览器既可以实现在线手写汉字识别的在线工具 废话不多说，上效果图：
是不是很神奇 在线demo地址 index.html HanziLookupJS demo 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; } HanziLookupJS demo github.com/gugray/HanziLookupJS Stroke input Loading... Undo Clear Recognized characters Original HanziLookup data Make Me a Hanzi data 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("" + matches[i].character + ""); } } })(); |
【本文地址】