title: Can't recognize image using OCR
body: <p>I was trying to use <a href="https://github.com/antimatter15/ocrad.js/" rel="nofollow noreferrer">ocrad.js</a> to convert an image to a string, but I didn't get the result string. I was also previewing the image, the problem is only in the image recognition.</p>
  
  <p>This is my code:</p>
  
  <pre><code>function pr_image(event) {
      var reader = new FileReader();
      reader.onload = function() {
          var output = document.getElementById('output_image');
          output.src = reader.result;
      }
  
      reader.readAsDataURL(event.target.files[0]);
  
      var stringletter = OCRAD(event.target.files[0]);
      document.getElementById('letter').value = stringletter;
  }
  </code></pre>
  
  <p>and this is the browser's capture:</p>
  
  <p><a href="https://i.stack.imgur.com/VK6md.png" rel="nofollow noreferrer">unchanged value</a></p>
  
  <p><a href="https://i.stack.imgur.com/V5NHo.png" rel="nofollow noreferrer">no error message in console</a></p>
  
  <p>I've tried to change the recognition code into this one function, but i get . as the image recognition's result:</p>
  
  <pre><code>function str_img(event) {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var img = new Image();
  
      img.onload = function() {
          context.drawImage(this, 0, 0);
      }
  
      var imageData = context.getImageData(0, 0, 100, 100);
      var stringletter = OCRAD(imageData);
      document.getElementById('letter').value = stringletter;
  }
  </code></pre>
  
  <p>I suspect that I failed at converting the input file as image data. What should I do? Any help is appreciated!</p>
  
  <p>Solved:</p>
  
  <p>I've changed my code into this by Chris G and it works! Thank you</p>
  
  <pre><code>function preview_image(event) 
  {
       var reader = new FileReader();
       var output = document.getElementById('output_image');
       reader.onload = function()
       {
          output.src = reader.result;
       }
  
       reader.readAsDataURL(event.target.files[0]);
  
       output.onload = function()
       {
          var stringletter = OCRAD(output);
          document.getElementById('letter').value = stringletter;
       }
  }
  </code></pre>