title: Pass image to Tesseract.js OCR
body: <p>You can find the Tesseract JS Wrapper that I am referring to <a href="http://tesseract.projectnaptha.com/#get_started" rel="nofollow noreferrer">here</a>.</p>
  
  <p>What we want to accomplish:</p>
  
  <ul>
  <li>Upload a photo of a printed document</li>
  <li>Turn that photo into text</li>
  </ul>
  
  <p>Things done to setup so far:</p>
  
  <ul>
  <li><code>npm install tesseract.js</code></li>
  </ul>
  
  <p>Here is our code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input id="myFileInput" type="file" accept="image/*;" capture="camera"&gt;
  
  &lt;img id="pic" src="rec.jpg"&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script src="http://tenso.rs/tesseract.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var img = document.getElementById("pic");
  
  Tesseract
    .recognize( img, {
      progress: show_progress} )
    .then( display )
  
  &lt;/script&gt;
  </code></pre>
  
  <p>What's happening in the Console:</p>
  
  <p>"Uncaught ReferenceError: show_progress is not defined"</p>
  
  <p>"hallo",</p>
  
  <p>"pre-main prep time: 67 ms",</p>
  
  <hr>
  
  <p>As you can see, we've abandoned the photo upload feature for the moment, until we can figure out how to get tesseract.js to work for a single, pre-provided jpg. Eventually, we hope to add this functionality. </p>
  
  <p>Any help would be greatly appreciated, we're doing this for fun and are mainly seeking a simple (but effective) means of doing OCR with JavaScript. If you have another suggestion, please let us know!</p>