<! DOCTYPE html >
<! DOCTYPE html >
< html lang = " zh-CN" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 图像OCR Tesseract.js 测试</ title>
< script src = ' https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js' > </ script>
</ head>
< body>
< input type = " file" id = " file-inp" accept = " image/*" >
< img id = " preview-img" style = " max-width : 100%; margin : 15px; display : none; " >
< div id = " ocr-result" style = " border : 1px solid; padding : 15px; display : none; " contenteditable > </ div>
< script>
const fileInp = document. querySelector ( '#file-inp' ) ;
const previewImg = document. querySelector ( '#preview-img' ) ;
const OCRresult = document. querySelector ( '#ocr-result' ) ;
fileInp. addEventListener ( 'change' , function ( e ) {
const file = e. target. files[ 0 ] ;
if ( ! file) { return ; } ;
const reader = new FileReader ( ) ;
reader. onload = function ( e ) {
const image = new Image ( ) ;
image. src = e. target. result;
image. onload = function ( ) {
previewImg. src = image. src;
previewImg. style. display = 'block' ;
Tesseract. recognize ( image, 'chi_sim' , {
logger : info => console. log ( info)
} ) . then ( result => {
console. log ( '【识别结果】' , result) ;
if ( result?. data?. text) {
OCRresult. style. display = 'block' ;
OCRresult. innerText = result?. data?. text;
}
} ) . catch ( error => {
console. error ( '【错误】' , error) ;
} ) ;
} ;
} ;
reader. readAsDataURL ( file) ;
} ) ;
</ script>
</ body>
</ html>