使用tesseract.js插件实现前端js识别提取图片的文字

news2024/12/24 10:18:51

在这里插入图片描述

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