console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tesseract.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js"></script>
</head>
<body>
<input type="file" accept="image/*" onchange="handleFileSelect(event)">
<div id="output"></div>

<script>
function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function(e) {
    const img = new Image();
    img.src = e.target.result;
    
    Tesseract.recognize(
      img,
      'eng+chi_sim',
      {
        logger: m => console.log(m)
      }
    ).then(({ data: { text, lines } }) => {
      const outputDiv = document.getElementById('output');
      
      lines.forEach(line => {
        const lineDiv = document.createElement('div');
        lineDiv.style.position = 'absolute';
        lineDiv.style.top = line.bbox.y0 + 'px';
        lineDiv.style.left = line.bbox.x0 + 'px';
        lineDiv.textContent = line.text;
        outputDiv.appendChild(lineDiv);
        
        line.words.forEach(word => {
          const wordSpan = document.createElement('span');
          wordSpan.textContent = word.text + ' ';
          lineDiv.appendChild(wordSpan);
        });
      });
    });
  };
  
  reader.readAsDataURL(file);
}
</script>
</body>
</html>