大家好，我是 V 哥。

本来今天想偷个懒，因为放假了，带家人去爬山，好久没有运动了，累够呛，打开电脑，看到粉丝的问题，正好之前研究过这个问题，好吧，灵感来了，就以这个话题给兄弟们整理点资料，以备之需。

Tesseract.js 是一个基于网页的 OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。在之前的一个项目 V 哥正好用过这个东东，今天一看，已被 Star 33.1k 了，也是一个牛逼的开源项目库。

有兄弟是不是会疑惑，V 哥你不是搞后端的么？谁说搞后端的就不能研究前端呢，不仅是前端，测试、运维、其它开发语言，只要在这行时间长了，工作需要都要搞一搞，语言只是工具，实现用户需求才是关键，只不过以后端为主而已，好了进入主题。

先来一个简单的示例，感受一下如何使用 Tesseract.js 从图片中提取文字：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCR Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const imgData = event.target.result;
        Tesseract.recognize(
            imgData,
            'eng', // 识别语言（英文）
            { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
        ).then(({ data: { text } }) => {
            document.getElementById('output').innerText = text;
        });
    };
    reader.readAsDataURL(file);
});
</script>
</body>
</html>

这个代码创建了一个简单的页面，其中包含一个文件输入字段，用户可以选择要上传的图片文件。一旦选择了文件，它将被读取并传递给 Tesseract.js 进行 OCR 处理，然后提取的文本将显示在页面上。

Tesseract.js 是一个基于网页的 OCR（光学字符识别）引擎，适用于各种需要从图像中提取文本的应用场景，它具有以下核心功能：

文本识别：Tesseract.js 可以从图像中识别出文本，并将其转换为可供计算机处理的文本数据。

多语言支持：它支持多种语言的文本识别，包括但不限于英语、中文、日语、法语、德语等。

精度调优：可以通过设置参数来调整识别精度和速度，以适应不同需求下的应用场景。

网页集成：作为一个 JavaScript 库，Tesseract.js 可以直接在网页中使用，无需额外的服务器端支持。

异步处理：Tesseract.js 使用异步处理，可以在后台进行图像处理和文本识别，不会阻塞用户界面。

GPU 加速：一些版本的 Tesseract.js 支持利用 GPU 进行加速，以提高处理速度。

自定义识别模型：可以根据需要使用训练数据自定义识别模型，以提高特定文本类型或特定语言的识别准确率。

日志输出：提供日志输出功能，可以用于跟踪处理进度、识别结果等信息。

1、文本识别

以下是一个简单的代码示例，演示如何使用 Tesseract.js 进行文本识别：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Recognition Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        Tesseract.recognize(
            imgData,
            'eng', // 识别语言（英文）
            { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
        ).then(({ data: { text } }) => {
            document.getElementById('output').innerText = text;
        });
    };
    
    reader.readAsDataURL(file);
});
</script>
</body>
</html>

这段代码创建了一个简单的页面，其中包含一个文件输入字段，用户可以选择要上传的图片文件。一旦选择了文件，它将被读取并传递给 Tesseract.js 进行 OCR 处理，然后提取的文本将显示在页面上。

逻辑与原理解释如下：

用户选择图片文件并上传至网页。这一步通过HTML的<input type="file">元素实现。
JavaScript监听文件输入字段的变化事件。一旦用户选择了文件，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件。这里使用readAsDataURL()方法将图片文件读取为Data URL格式。
一旦图片文件被读取为Data URL，就可以将其作为参数传递给Tesseract.js的recognize()方法。在这个例子中，我们指定了要识别的语言为英文（'eng'）。
recognize()方法返回一个Promise对象，当文本识别完成时，Promise会被解析，并返回识别结果。
在Promise的解析回调函数中，我们将识别结果中的文本提取出来，并将其显示在页面上。在这个例子中，我们将文本内容插入到页面中具有ID为output的元素中。

这个示例代码演示了如何通过Tesseract.js实现文本识别功能，并将识别结果显示在网页上。

2、多语言支持

以下是一个简单的代码示例，演示如何在 Tesseract.js 中实现多语言文本识别：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilingual Text Recognition Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<select id="languageSelect">
  <option value="eng">English</option>
  <option value="fra">French</option>
  <option value="deu">German</option>
  <!-- Add more options for other languages -->
</select>
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        const selectedLanguage = document.getElementById('languageSelect').value;
        
        Tesseract.recognize(
            imgData,
            selectedLanguage, // 根据用户选择的语言进行文本识别
            { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
        ).then(({ data: { text } }) => {
            document.getElementById('output').innerText = text;
        });
    };
    
    reader.readAsDataURL(file);
});
</script>
</body>
</html>

逻辑与原理解释如下：

用户选择要上传的图片文件，并选择要识别的语言。这个示例使用了一个<select>元素，允许用户从预定义的语言列表中选择要识别的语言。
JavaScript监听文件输入字段和语言选择字段的变化事件。一旦用户选择了文件并选择了语言，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件，并将其转换为 Data URL 格式。
获取用户选择的语言，这里通过<select>元素的值来确定用户选择的语言。
将图片数据和选择的语言作为参数传递给 Tesseract.js 的recognize()方法。
recognize()方法返回一个Promise对象，当文本识别完成时，Promise会被解析，并返回识别结果。
在Promise的解析回调函数中，将识别结果中的文本提取出来，并将其显示在页面上。

通过这个示例，用户可以选择不同的语言进行文本识别，并且可以根据需要扩展更多语言选项。

3、精度调优

在 Tesseract.js 中调整识别精度的主要方式是通过配置参数来实现。以下是一个示例代码，演示如何通过设置不同的配置参数来调整识别精度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Recognition Accuracy Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<button id="highAccuracyButton">High Accuracy</button>
<button id="fastRecognitionButton">Fast Recognition</button>
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        recognizeText(imgData);
    };
    
    reader.readAsDataURL(file);
});
document.getElementById('highAccuracyButton').addEventListener('click', function() {
    Tesseract.setParameters({
        tessedit_ocr_engine_mode: 'OEM_TESSERACT_ONLY', // 使用 Tesseract 引擎
        tessedit_pageseg_mode: 'PSM_SINGLE_BLOCK', // 单个文本块模式
        tessedit_char_whitelist: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 识别的字符白名单
        tessedit_zero_rejection: true // 允许零置信度的识别结果
    });
    // 重新识别文本
    recognizeText();
});
document.getElementById('fastRecognitionButton').addEventListener('click', function() {
    Tesseract.setParameters({
        tessedit_ocr_engine_mode: 'OEM_LSTM_ONLY', // 使用 LSTM 引擎
        tessedit_pageseg_mode: 'PSM_AUTO' // 自动分页模式
    });
    // 重新识别文本
    recognizeText();
});
function recognizeText(imgData) {
    Tesseract.recognize(
        imgData,
        'eng', // 识别语言（英文）
        { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
    ).then(({ data: { text } }) => {
        document.getElementById('output').innerText = text;
    });
}
</script>
</body>
</html>

逻辑与原理解释如下：

用户选择要上传的图片文件。一旦选择了文件，会触发文件输入字段的变化事件，并读取图片文件的数据。
通过点击“High Accuracy”或“Fast Recognition”按钮，用户可以选择不同的识别精度。根据按钮的点击事件，会调用不同的配置参数。
在点击“High Accuracy”按钮时，设置了一些参数来提高识别的精度。例如，使用 Tesseract 引擎、单个文本块模式、自定义字符白名单等。
在点击“Fast Recognition”按钮时，设置了一些参数来加快识别速度。例如，使用 LSTM 引擎、自动分页模式等。
调用recognizeText()函数来进行文本识别，该函数会根据所设置的参数来识别图片中的文本。

通过这个示例，用户可以根据需求选择不同的识别精度，从而实现更灵活的文本识别。

4、网页集成

以下是一个简单的代码示例，演示如何在网页中集成 Tesseract.js 进行文本识别：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Integration with Tesseract.js</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        Tesseract.recognize(
            imgData,
            'eng', // 识别语言（英文）
            { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
        ).then(({ data: { text } }) => {
            document.getElementById('output').innerText = text;
        });
    };
    
    reader.readAsDataURL(file);
});
</script>
</body>
</html>

逻辑与原理解释如下：

用户在网页中选择要上传的图片文件。这一步通过HTML的<input type="file">元素实现。
JavaScript监听文件输入字段的变化事件。一旦用户选择了文件，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件，并将其转换为 Data URL 格式。
将图片数据和选择的语言作为参数传递给 Tesseract.js 的recognize()方法。在这个例子中，我们指定了要识别的语言为英文（'eng'）。
recognize()方法返回一个Promise对象，当文本识别完成时，Promise会被解析，并返回识别结果。
在Promise的解析回调函数中，我们将识别结果中的文本提取出来，并将其显示在页面上。在这个例子中，我们将文本内容插入到页面中具有ID为output的元素中。

通过这个示例，用户可以在网页中直接使用Tesseract.js进行文本识别，无需额外的服务器端支持。

5、异步处理

以下是一个简单的代码示例，演示如何使用 Tesseract.js 进行异步处理，以便在后台进行图像处理和文本识别，而不会阻塞用户界面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asynchronous Text Recognition Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output">Processing...</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        // 在异步任务中执行文本识别
        recognizeText(imgData);
    };
    
    reader.readAsDataURL(file);
});
function recognizeText(imgData) {
    // 使用 Promise 来包装异步操作
    new Promise((resolve, reject) => {
        // 在异步任务中执行文本识别
        Tesseract.recognize(
            imgData,
            'eng', // 识别语言（英文）
            { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
        ).then(({ data: { text } }) => {
            // 将识别结果传递给 Promise 的解析函数
            resolve(text);
        }).catch(error => {
            // 如果发生错误，将错误信息传递给 Promise 的拒绝函数
            reject(error);
        });
    }).then(text => {
        // 异步任务完成后，更新页面上的文本内容
        document.getElementById('output').innerText = text;
    }).catch(error => {
        // 处理错误情况，例如输出错误信息到控制台
        console.error('Error:', error);
    });
}
</script>
</body>
</html>

逻辑与原理解释如下：

用户在网页中选择要上传的图片文件。这一步通过HTML的<input type="file">元素实现。
JavaScript监听文件输入字段的变化事件。一旦用户选择了文件，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件，并将其转换为 Data URL 格式。
在异步任务recognizeText()中执行文本识别。通过将文本识别操作包装在Promise对象中，使其成为一个异步任务。这样可以确保文本识别操作在后台进行，不会阻塞用户界面。
当异步任务完成时（即文本识别操作完成时），将识别结果更新到页面上。这通过Promise对象的解析函数实现。

通过这个示例，用户可以在网页中执行文本识别操作，而不会影响到用户界面的响应性能。

6、GPU 加速

在 Tesseract.js 中，GPU 加速是通过在浏览器环境中使用 WebGL 技术来实现的。以下是一个简单的代码示例，演示如何在 Tesseract.js 中启用 GPU 加速：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPU Acceleration Text Recognition Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output">Processing...</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        // 在异步任务中执行文本识别
        recognizeText(imgData);
    };
    
    reader.readAsDataURL(file);
});
function recognizeText(imgData) {
    // 启用 GPU 加速
    Tesseract.setOcrStrategy(Tesseract.OcrStrategy.AUTO);
    
    // 使用 Promise 来包装异步操作
    new Promise((resolve, reject) => {
        // 在异步任务中执行文本识别
        Tesseract.recognize(
            imgData,
            'eng', // 识别语言（英文）
            { logger: m => console.log(m) } // 可选的日志函数，用于查看处理进度
        ).then(({ data: { text } }) => {
            // 将识别结果传递给 Promise 的解析函数
            resolve(text);
        }).catch(error => {
            // 如果发生错误，将错误信息传递给 Promise 的拒绝函数
            reject(error);
        });
    }).then(text => {
        // 异步任务完成后，更新页面上的文本内容
        document.getElementById('output').innerText = text;
    }).catch(error => {
        // 处理错误情况，例如输出错误信息到控制台
        console.error('Error:', error);
    });
}
</script>
</body>
</html>

逻辑与原理解释如下：

用户在网页中选择要上传的图片文件。这一步通过HTML的<input type="file">元素实现。
JavaScript监听文件输入字段的变化事件。一旦用户选择了文件，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件，并将其转换为 Data URL 格式。
在异步任务recognizeText()中执行文本识别。通过将文本识别操作包装在Promise对象中，使其成为一个异步任务。这样可以确保文本识别操作在后台进行，不会阻塞用户界面。
在调用recognize()方法之前，使用Tesseract.setOcrStrategy()来启用 GPU 加速。这将使 Tesseract.js 尝试使用 GPU 来加速文本识别过程。

通过这个示例，用户可以在网页中启用 GPU 加速以加快文本识别速度，从而提升用户体验。

7、自定义识别模型

Tesseract.js支持自定义识别模型，这使得用户可以根据自己的需求训练模型，以提高特定类型文本或特定语言的识别准确率。以下是一个简单的示例代码，演示如何使用自定义识别模型：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Model Text Recognition Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output">Processing...</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        // 在异步任务中执行文本识别
        recognizeText(imgData);
    };
    
    reader.readAsDataURL(file);
});
function recognizeText(imgData) {
    // 设置自定义识别模型路径
    const customModelPath = 'path/to/your/custom/model.traineddata';
    
    // 使用 Promise 来包装异步操作
    new Promise((resolve, reject) => {
        // 在异步任务中执行文本识别
        Tesseract.recognize(
            imgData,
            {
                lang: 'custom', // 使用自定义语言标识符
                tessedit_char_whitelist: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 识别的字符白名单
                tessedit_zero_rejection: true // 允许零置信度的识别结果
            }
        ).then(({ data: { text } }) => {
            // 将识别结果传递给 Promise 的解析函数
            resolve(text);
        }).catch(error => {
            // 如果发生错误，将错误信息传递给 Promise 的拒绝函数
            reject(error);
        });
    }).then(text => {
        // 异步任务完成后，更新页面上的文本内容
        document.getElementById('output').innerText = text;
    }).catch(error => {
        // 处理错误情况，例如输出错误信息到控制台
        console.error('Error:', error);
    });
}
</script>
</body>
</html>

逻辑与原理解释如下：

用户在网页中选择要上传的图片文件。这一步通过HTML的<input type="file">元素实现。
JavaScript监听文件输入字段的变化事件。一旦用户选择了文件，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件，并将其转换为 Data URL 格式。
在异步任务recognizeText()中执行文本识别。通过将文本识别操作包装在Promise对象中，使其成为一个异步任务。这样可以确保文本识别操作在后台进行，不会阻塞用户界面。
在调用recognize()方法之前，通过设置lang参数为自定义语言标识符，指定使用自定义的识别模型。同时，可以根据需要设置其他参数，如识别的字符白名单、允许零置信度的识别结果等。

通过这个示例，用户可以在网页中使用自定义的识别模型进行文本识别，从而提高特定类型文本或特定语言的识别准确率。

8、日志输出

以下是一个简单的代码示例，演示如何在 Tesseract.js 中使用日志输出功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Recognition with Logging Demo</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.3.0/dist/tesseract.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="output">Processing...</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    
    reader.onload = function(event) {
        const imgData = event.target.result;
        
        // 在异步任务中执行文本识别，并记录日志
        recognizeText(imgData);
    };
    
    reader.readAsDataURL(file);
});
function recognizeText(imgData) {
    // 使用 Promise 来包装异步操作
    new Promise((resolve, reject) => {
        // 在异步任务中执行文本识别，并记录日志
        Tesseract.recognize(
            imgData,
            'eng', // 识别语言（英文）
            { 
                logger: m => console.log(m) // 日志输出函数，用于查看处理进度
            }
        ).then(({ data: { text } }) => {
            // 将识别结果传递给 Promise 的解析函数
            resolve(text);
        }).catch(error => {
            // 如果发生错误，将错误信息传递给 Promise 的拒绝函数
            reject(error);
        });
    }).then(text => {
        // 异步任务完成后，更新页面上的文本内容
        document.getElementById('output').innerText = text;
    }).catch(error => {
        // 处理错误情况，例如输出错误信息到控制台
        console.error('Error:', error);
    });
}
</script>
</body>
</html>

逻辑与原理解释如下：

用户在网页中选择要上传的图片文件。这一步通过HTML的<input type="file">元素实现。
JavaScript监听文件输入字段的变化事件。一旦用户选择了文件，会触发事件处理函数。
在事件处理函数中，使用FileReader对象读取用户选择的图片文件，并将其转换为 Data URL 格式。
在异步任务recognizeText()中执行文本识别，并通过设置logger参数来启用日志输出功能。这样可以在控制台中查看处理进度和其他相关信息。
在文本识别完成后，将识别结果更新到页面上。如果发生错误，也会在控制台中输出错误信息。

通过这个示例，用户可以在网页中使用 Tesseract.js 进行文本识别，并通过日志输出功能查看处理进度和调试信息。

最后

想要在前端解决图像识别的兄弟，可以到 Github 上下载Tesseract.js库，安装和相关学习文档都能下载到，实在获取不到的兄弟找V哥发给你，假期第二天，出去放松的同时也可以看看 V 哥的文章，祝大家玩得开心。

Star33.1k！推荐一个基于网页的OCR（光学字符识别）引擎库

1、文本识别

2、多语言支持

3、精度调优

4、网页集成

5、异步处理

6、GPU 加速

7、自定义识别模型

8、日志输出

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Star33.1k！推荐一个基于网页的OCR（光学字符识别）引擎库

1、文本识别

2、多语言支持

3、精度调优

4、网页集成

5、异步处理

6、GPU 加速

7、自定义识别模型

8、日志输出

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景