Как преобразовать изображение в текст с помощью Javascript - PullRequest
Новая
       55

Как преобразовать изображение в текст с помощью Javascript

0 голосов
/ 05 августа 2020

Я пытаюсь преобразовать изображение в текст. Когда кто-либо загружает изображение, нажмите «Отправить», текст изображения должен отображаться в текстовой области. Мой следующий код не работает, пожалуйста, помогите!

Код: 

 <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>

1 Ответ

1 голос
/ 05 августа 2020

Если вы прикрепите прослушиватель событий к вводу файла, вы сможете распознать текст после успешной загрузки файла, например: 

<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>
...