【前端】如何直接选中复制图片中的文字：前端OCR实现指南

帅比九日

已于 2024-04-29 10:57:36 修改

阅读量408

点赞数 8

分类专栏：踩过的坑文章标签：前端 ocr javascript

于 2024-04-29 10:51:45 首次发布

本文链接：https://blog.csdn.net/qq_41883423/article/details/138305024

版权

踩过的坑专栏收录该内容

135 篇文章 3 订阅

订阅专栏

如何直接选中复制图片中的文字：前端OCR实现指南

在现代Web开发中，从图片中提取文字是一个常见需求。无论是处理扫描的文档图片，还是用户上传的图片，通过OCR (光学字符识别) 技术，我们可以实现从图像中提取文字的功能。本文将详细介绍如何使用JavaScript（借助Tesseract.js库）从图片中提取，并可供复制的文字。

实现效果参考微信图片的图片文字识别。

第一步：页面布局与样式定义

我们的HTML页面包含基本的文件上传控件、进度条显示、以及用于展示图片和文字覆盖的容器。CSS用于简单设定进度条及图片展示的样式。

<input type="file" id="upload" accept="image/*">
<div id="progressContainer">
    <div id="progressBar"></div>
</div>
<div id="textOverlays" style="position:relative;">
    <img id="display" src="" alt="Uploaded Image" style="position: absolute;">
    <canvas id="canvas" style="display:none;"></canvas>
</div>

第二步：文件上传与图像预处理

当用户选择文件后，我们通过FileReader对象将上传的图片文件转换为数据URL，然后使用<canvas>元素来对图片进行预处理。预处理的目的是调整图像的亮度阈值，以优化后续的文字识别过程。

document.getElementById('upload').addEventListener('change', function (event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            /* 灰度与二值化过程 */
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            for (var i = 0; i < data.length; i += 4) {
                var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                var threshold = brightness < 128 ? 0 : 255;
                data[i] = data[i + 1] = data[i + 2] = threshold;
            }
            ctx.putImageData(imageData, 0, 0);
            document.getElementById('display').src = e.target.result;
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

第三步：文字识别与展示

我们使用Tesseract.js库对处理后的图像进行OCR识别。识别过程中，实时更新进度条，并在识别完成后将识别的文字以覆盖在原图上的形式展示。这里我们动态创建<span>元素，绝对定位到原图对应文字的位置。

Tesseract.recognize(
    canvas,
    'chi_sim', // 指定中文简体进行识别
    {
        logger: m => {
            console.log(m);
            if (m.status === 'recognizing text') {
                var progress = Math.floor(m.progress * 100);
                document.getElementById('progressBar').style.width = progress + '%';
            }
        }
    }
).then(({ data: { text, words } }) => {
    for (let word of words) {
        const el = document.createElement("span");
        el.style.position = "absolute";
        el.style.left = `${word.bbox.x0}px`;
        el.style.top = `${word.bbox.y0}px`;
        el.style.color = "red";
        el.style.fontSize = `${word.font_size}px`;
        el.textContent = word.text;
        document.getElementById('textOverlays').appendChild(el);
    }
});

完整代码实现

这里的代码可以直接复制到一个html文件中使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMG to Text OCR</title>
    <style>
        #progressBar {
            width: 0%;
            height: 20px;
            background-color: green;
        }
        #progressContainer {
            width: 100%;
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <input type="file" id="upload" accept="image/*">
    <div id="progressContainer">
        <div id="progressBar"></div>
    </div>
    <div id="textOverlays" style="position:relative;">
        <img id="display" src="" alt="Uploaded Image" style="position: absolute;user-select:none;">
        <canvas id="canvas" style="display:none;"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2"></script>
    <script>
        document.getElementById('upload').addEventListener('change', function (event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function () {
                    var canvas = document.getElementById('canvas');
                    var ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    var data = imageData.data;
                    for (var i = 0; i < data.length; i += 4) {
                        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                        var threshold = brightness < 128 ? 0 : 255;
                        data[i] = data[i + 1] = data[i + 2] = threshold;
                    }
                    ctx.putImageData(imageData, 0, 0);
                    document.getElementById('display').src = e.target.result; // Display the original image
                    Tesseract.recognize(
                        canvas,
                        'chi_sim',
                        {
                            logger: m => {
                                console.log(m);
                                if (m.status === 'recognizing text') {
                                    var progress = Math.floor(m.progress * 100);
                                    document.getElementById('progressBar').style.width = progress + '%';
                                }
                            }
                        }
                    ).then(({ data: { text, words } }) => {
                        for (let word of words) {
                            const el = document.createElement("span");
                            el.style.position = "absolute";
                            el.style.left = `${word.bbox.x0}px`;
                            el.style.top = `${word.bbox.y0}px`;
                            el.style.color = `rgba(0,0,0,0)`;
                            el.style.fontSize = `${((word.bbox.y1 - word.bbox.y0) + (word.bbox.x1 - word.bbox.x0))/2}px`;
                            el.textContent = word.text;
                            document.getElementById('textOverlays').appendChild(el);
                        }
                    });
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });
    </script>
</body>

</html>