首页前端实现OCR

前端实现OCR

时间: 2023-07-07 17:24:18 浏览: 107

OCR（Optical Character Recognition，光学字符识别）是一种将图片中的文字转化为计算机可识别的文本的技术。在前端实现OCR，可以使用Google提供的开源JavaScript库Tesseract.js。以下是一个使用Tesseract.js实现前端OCR的示例： ```html <!DOCTYPE html> <html> <head> <title>前端OCR</title> <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.4/dist/tesseract.min.js"></script> </head> <body> <input type="file" id="file-input"> <img id="img-preview" style="max-width: 500px; max-height: 500px;"> <button id="btn-ocr">识别文字</button> <div id="result"></div> <script> const fileInput = document.getElementById('file-input'); const imgPreview = document.getElementById('img-preview'); const btnOCR = document.getElementById('btn-ocr'); const resultDiv = document.getElementById('result'); // 当用户选择文件时，显示选择的图片，用于预览 fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { imgPreview.setAttribute('src', event.target.result); }; reader.readAsDataURL(file); }); // 当用户点击“识别文字”按钮时，对图片中的文字进行识别 btnOCR.addEventListener('click', () => { const img = imgPreview; // 使用Tesseract.js进行文字识别 Tesseract.recognize(img.src, 'eng', { logger: m => console.log(m) }).then(({ data: { text } }) => { resultDiv.innerHTML = text; }); }); </script> </body> </html> ``` 这个示例包含一个文件选择框，一个图片预览区域，一个“识别文字”按钮以及一个结果显示区域。当用户选择图片并点击“识别文字”按钮时，使用Tesseract.js对图片中的文字进行识别，并将结果显示在结果显示区域中。

阅读全文