tesseract.js手写单词ocr识别匹配效果代码
代码语言:html
所属分类:其他
代码描述:tesseract.js手写单词ocr识别匹配效果代码,按住鼠标写出单词,经过ocr识别是否是正确的单词。
代码标签: tesseract 手写 单词 ocr 识别 匹配
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css"> <style> * { box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Roboto", sans-serif; background: #ffd234; background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%); color: #1f1f1f; } h1 { margin-bottom: 20px; padding-right: 60px; } b { font-weight: 700; } .branding { position: fixed; bottom: 10px; right: 10px; } .branding img { width: 50px; } .wrap { width: 560px; height: 400px; display: flex; position: relative; } .canvas { flex: 0 0 calc(100% - 60px); border: 4px solid #ffe094; border-radius: 6px; overflow: hidden; background: white; cursor: pointer; position: relative; } .canvas canvas { width: 100%; height: 100%; background-size: 100%; } .result { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 90px; animation: grow-fade 1s; transform-origin: top left; } .result.fa-xmark { color: red; } .result.fa-check { color: green; } .controls { position: absolute; z-index: 1; bottom: -10px; left: 10px; display: flex; align-items: flex-end; } .controls button { position: relative; appearance: none; border: 2px solid #ffe094; border-radius: 10px; background: white; color: #111; padding: 5px 10px; text-transform: uppercase; cursor: pointer; font-size: 12px; font-family: "Roboto", sans-serif; margin-right: 10px; transition: transform 350ms; } .controls button:last-child { font-size: 18px; font-weight: 700; padding: 10px 20px; } .controls button:last-child:hover { box-shadow: 0px 0px 10px #ffe094; } .controls button:hover { transform: scale(1.1); } .instruct { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 20px; padding-right: 60px; white-space: nowrap; } .instruct span { background: #ddd; display: inline-block; border-radius: 25px; padding: 5px 10px; font-weight: 700; } .counter { flex: 0 0 60px; padding-left: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; } .counter__item { border-radius: 100%; width: 40px; height: 40px; border: 3px solid #333; margin: 3px 0; background: rgba(255, 255, 255, 0.5); } .counter__item.active { background: linear-gradient(152deg, #85ffbd 0%, #fffb7d 100%); } .counter__score { display: flex; width: 100%; justify-content: center; margin-bottom: 5px; } .counter__score span { flex: 0 0 10px; height: 10px; border-radius: 100%; border: 2px solid #333; background: linear-gradient(152deg, #85ffbd 0%, #fffb7d 100%); margin-right: 3.33px; } .counter__score span:last-child { margin-right: 0; } .timer { position: absolute; top: -10px; right: -10px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: white; border-radius: 100%; border: 2px solid #ffe094; overflow: hidden; } .timer__fill { background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%); position: absolute; transform: translateZ(0); bottom: 0; left: -5px; right: -5px; height: 0; } .timer i { position: relative; text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); } @keyframes grow-fade { 0% { transform: scale(1) translate(-50%, -50%); opacity: 1; } 100% { transform: scale(2) translate(-50%, -50%); opacity: 0; } } @keyframes shake-right { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-10px, 0); } 70% { transform: translate(50px, 0); } } @keyframes shake-left { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(10px, 0); } 70% { transform: translate(-50px, 0); } } @keyframes shake-up { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(0, 10px); } 70% { transform: translate(0, -50px); } } @keyframes shake-down { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(0, -10px); } 70% { transform: translate(0, 50px); } } </style> </head> <body> <h1>Write <b>words</b> neatly... avoid the <b>shakes</b>... the AI tries it's best...</h1> <div class="wrap"> <div class="canvas"> <canvas></canvas> </div> <div class="controls"> <button id="reset"><i class="fa fa-eraser"></i> Clear</button> <button id="submit">Submit</button> </div> <div class="instruct">Write <span></span> below</div> <div class="counter"></div> <div class="timer"> <div class="timer__fill"></div><i class="fa-solid fa-hourglass-empty"></i> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0