Pure Javascript OCR for more than 100 Languages 📖🎉🖥
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

110 lines
5.5 KiB

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tesseract.js | Pure Javascript OCR for 100 Languages!</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<script>
if (location.protocol === "http:" && !location.host.startsWith('localhost')) {
location.replace("https" + window.location.href.slice(4));
}
</script>
</head>
<body ondragover="return false">
<div id="splash">
<div id="logo-wrap" class="header">
<canvas id="logo-canvas"></canvas>
<img id="logo-img" src="img/logowhite.png">
<div id='slogan'>Pure Javascript Multilingual OCR</div>
</div>
<div class='get-started-wrap'>
<a href="https://github.com/naptha/tesseract.js#tesseractjs">
<div class='get-started'>
<svg id="github" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
Get Started
</div>
</a>
</div>
</div>
<div id='demo'>
<!-- <div class="commentary">
<div id='demo-title'>Demo</div>
<p>Wherein we show you that Tesseract.js works, and let you try it with your own images.</p>
</div>
-->
<div class='commentary'>
<p><b>Tesseract.js</b> is a pure Javascript port of the popular <a href='https://github.com/tesseract-ocr/tesseract'>Tesseract OCR engine</a>. </p>
<p>This library supports <b>more than 100 languages</b>, automatic text <b>orientation and script detection</b>, a simple interface for reading paragraph, word, and character <b>bounding boxes</b>. Tesseract.js can run either in a <b>browser</b> and on a server with <b>NodeJS</b>. </p>
<p>Check out the <a href='https://github.com/naptha/tesseract.js#tesseractjs'>Example code and API docs on GitHub</a>.</p>
</div>
<div id='demo-body'>
<div id='options'>
<div class="option selected" lang='eng'>English Demo</div>
<div class="option" lang='chi_sim'>Chinese Demo</div>
<div class="option" lang='rus'>Russian Demo</div>
</div>
<div id='drop-instructions-main'><p>Drop <span class='drop-instructions'>an English</span> image on this page to OCR it!</p></div>
<div id='demo-content'>
<div>
<canvas id='input-overlay'></canvas>
<img id='input' src="img/eng_bw.png"/>
</div>
<div id='arrow'></div>
<div>
<!-- <div id='output-overlay'></div> -->
<!-- <textarea id='output-text'></textarea> -->
<div id='log'></div>
<div id='demo-instructions'>
<span id='clickme' onclick='play()'>Click here to recognize text in the demo image</span>, or drop <span class='drop-instructions'>an English</span> image anywhere on this page.
</div>
<!-- <canvas id='output'></canvas> -->
</div>
</div>
<div class='get-started-wrap'>
<br/>
<a href="https://github.com/naptha/tesseract.js#tesseractjs">
<div class='get-started'>
<svg id="github" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
Actually Get Started
</div>
</a>
</div>
</div>
</div>
<div id='footer'>
<span id="lengle">“Speaking of ways, pet, by the way, <b>there <i>is</i> such a thing as a tesseract</b>.”
<br>
<br>
<!-- Made with <img src="img/keyboard.png"> --> By <a href="https://twitter.com/biject">@biject</a>, <a href="https://twitter.com/antimatter15">@antimatter15</a> and <a href="https://github.com/jeromewu">@jeromewu</a></span>
</div>
<script src="animation/raf.js"></script>
<script src="animation/mouse.js"></script>
<script src="animation/dimensions.js"></script>
<script src="animation/hypercube.js"></script>
<script src="animation/animate.js"></script>
<script src="https://unpkg.com/tesseract.js@2.0.0/dist/tesseract.min.js" integrity="sha384-MTEb82ufpBJ2VCTmPZlD/+vgiT5z6zmOwqU/uDO9IobYm9xCOUEN0WH3czf6ppl8" crossorigin="anonymous"></script>
<script src="demo.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-83153710-3', 'auto', 'origin');
ga('origin.send', 'pageview');
ga('create', 'UA-139963961-1', 'auto', 'addon');
ga('addon.send', 'pageview');
</script>
</body>
</html>