如何使用 Javascript 将图像转换为文本

Question

我正在尝试将图像转换为文本。当任何人上传图像然后按“提交”图像文本应显示在文本区域中。我的以下代码不起作用，请帮助！

代码：

 <html>
    <body>
    
    <input type="file" id="myFile" name="filename">  
    <br><br>
<button onclick="myFunction()">Submit</button>
<br><br>
    
    <label><b>Your Converted Text:</b></label><br><br>
    
    <textarea cols="30" name="original" rows="10" style="width: 100%;" id="convertedText">
    </textarea>

    <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
    
    <script>  
     function myFunction() {
           var myImage= document.getElementById('myFile');
          
    
           Tesseract.recognize(myImage).then(function(result){
    
            console.log(result.text);
    
           document.getElementById("convertedText").value = result.text;
            
    
            });
    }
            </script>
            
    </body>
    </html>

Answer 1

如果您将事件侦听器附加到文件输入，则可以在文件成功加载后识别文本，如下所示：

<html>
<body>

<input type="file" id="myFile" name="filename">  
<br><br>

<label><b>Your Converted Text:</b></label><br><br>

<textarea cols="30" name="original" rows="10" style="width: 100%;" id="convertedText">
</textarea>

<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

<script>  

    var myFile = document.getElementById('myFile');
    myFile.addEventListener('change', recognizeText);

    async function recognizeText({ target: { files }  }) {
        Tesseract.recognize(files[0]).then(function(result) {
            console.log("recognizeText: result.text:", result.text);
            document.getElementById("convertedText").value = result.text;
        });
    }

</script>
        
</body>
</html>