// OCR
// Optical Character Recognition/Reader
// 光学的文字認識

document.title = '画像のテキスト文章を認識 OCR';

var h = document.createElement('h1');
h.textContent = document.title;
document.getElementById('demo').appendChild(h);

//白背景に黒字なら認識成功しやすい

var ary = [
  'eng',
  'jpn',
];

var lang = ary[0];
var f = document.createElement('form');
document.getElementById('demo').appendChild(f);
ary.forEach(function(v){
  var l = document.createElement('label');
  var i = document.createElement('input');
  l.textContent = v;
  i.name = 'lang';
  i.type = 'radio';
  l.appendChild(i);
  f.appendChild(l);
  l.addEventListener('click', function(){
    lang = v;
    console.log(v);
  });
});

var readyTesseract = function(image){

//https://unpkg.com/tesseract.js@3.0.3/dist/tesseract.min.js
//https://tesseract-ocr.github.io/tessdoc/Data-Files#data-files-for-version-400-november-29-2016

  Tesseract.recognize(
      image,
      lang,
//      'eng',
      { 
          logger: function(m) {
              progress.textContent = m.status;
          }
      }
  )
  .then(function(result){
      msg.textContent = result.data.text;
  });


/*
//https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/tesseract.js
  Tesseract
    .recognize(image, {lang: 'eng'}) //lang: jpn, eng
    .progress(function(p) {
      console.log(p);
      var per = Math.floor(p.progress*100) + '%';
      progress.textContent = p.status + ':' + per;
      progress.style.width = per;
    })
    .then(function(result) {
      console.log(result)
      msg.textContent = result.text;
  });
*/
}



var inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.style.width = '90%';
inputFile.onchange = function() {
  let files = this.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(files);
  reader.onload = function() {
    img.src = reader.result;
  }
}
document.getElementById('demo').appendChild(inputFile);



var img = new Image();
img.src = 'text-hello-world.png';
document.getElementById('demo').appendChild(img);


var progress = document.createElement('div');
progress.id = progress;
progress.style.color = '#fff';
progress.style.backgroundColor = 'hsl(120, 5%, 50%)';
progress.style.height = '40px';
progress.style.minWidth = '50%';
progress.style.lineHeight = '40px';
document.getElementById('demo').appendChild(progress);


var msg = document.createElement('p');
msg.style.fontSize = '32px';
msg.textContent = 'Post an image that contains text.';
document.getElementById('demo').appendChild(msg);


var canvas = document.createElement('canvas');

img.onload = function(){
  readyTesseract(img);
}
//https://cdn.rawgit.com/naptha/tesseract.js/1.0.7/dist/tesseract.js
/*
img.onload = function(){
  let ctx = canvas.getContext('2d')
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  let image = ctx.getImageData(0, 0, canvas.width, canvas.height);
  readyTesseract(image);
}
*/

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-text-OCR-tesseract/