Star33.1k！推荐一个基于网页的图像识别库

大家好，我是 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！推荐一个基于网页的图像识别库

1、文本识别

2、多语言支持

3、精度调优

4、网页集成

5、异步处理

6、GPU 加速

7、自定义识别模型

8、日志输出

最后

威哥爱编程

引用和评论

2025春招，深度思考MyBatis面试题

100个React最佳实践小技巧

Javascript(turfjs)等值线图绘制

2024最全ECharts 实战大全（速记版+资源）

Jerry和您聊聊Chrome开发者工具

一些react使用小技巧（中）

CSS 如何模拟“真实的”进度条？