JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://unpkg.com/tesseract.js/dist/tesseract.min.js'></script>

<label class="dropzone">
  <input type="file" id="file-input">
  スクリーンショットから自動入力
</label>
<p id="progress"></p>
<pre id="result"></pre>

CSS

#file-input {
	display: none;
}

.dropzone {
  display: block;
  border: 3px dashed #88f;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  color: #88f;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.dropzone:hover {
  border-color: #f88;
  color: #f88;
}

JavaScript

const fileInput = document.getElementById('file-input');

// ファイル選択時の処理
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  process(file);
});

fileInput.addEventListener('drop', (event) => {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  process(file);
});

const process = (file) => {
  	let image = new Image();
  	image.onload = () => {
      image = preProcessImage(image);

		  (async () => {
			  const worker = await Tesseract.createWorker({
			  	logger: m => {
			  		document.querySelector('#progress').textContent = m.status + ' ' + Math.floor(m.progress * 100) + '%';
			  	}
			  });
			  //await worker.loadLanguage('jpn');
			  //await worker.initialize('jpn');
			  await worker.loadLanguage('eng');
			  await worker.initialize('eng');
			  await worker.setParameters({
			  	tessedit_char_whitelist: '0123456789./~',
	//		  	tessedit_char_whitelist: '0123456789筋力体魔法幸運HPS武器攻撃防御属性抵抗命中率回避クリティカル確ダメージ最小大貫通バックアタ追加減モンスタ支配イム経験値アイテムドロプオプション発生Ely獲得量エスト報酬移動速度',
			  });
			  const { data: { text } } = await worker.recognize(image);
        
			  console.log(text);
			  document.querySelector('#result').textContent = text;
			})();
		};
		image.src = URL.createObjectURL(file);
}

const CONTRAST_THRESHOLD = 192;

const preProcessImage = (image) => {
  const canvas = document.createElement('canvas');
  // debug
  document.getElementsByTagName('body')[0].append(canvas);
  
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, image.width, image.height);

  const src = ctx.getImageData(0, 0, image.width, image.height);
  const dst = ctx.createImageData(image.width, image.height);

  for (let i = 0; i < src.data.length; i += 4) {
    // 明度 CONTRAST_THRESHOLD で白黒に分離
    const c = (src.data[i] >= CONTRAST_THRESHOLD
             || src.data[i+1] >= CONTRAST_THRESHOLD 
             || src.data[i+2] >= CONTRAST_THRESHOLD) ?
      0x00 : 0xff;
   ...