使用js截图组件screenShotPlugin.js截图和前端文字识别组件tesseract.js识别截取区域内容

screenShotPlugin

github地址： https://github.com/likaia/js-screen-shot/tree/master

<script src="../plugins/screenShotPlugin.umd.js"></script>
<div id="app">
  <div>截图插件文字展示</div>
  <br />
  <button onclick="changeScreenShot()">点击截图</button>
  <p>图片展示</p>
  <img src="../images/1.jpg" alt="" id="img-shot" width="300" />
</div>
<script type="text/javascript">
  // 截图确认按钮回调函数
  const callback = ({ base64, cutInfo }) => {
    console.log(base64, cutInfo);
    document.querySelector("#img-shot").src = base64;
  };
  // 截图取消时的回调函数
  const closeFn = () => {
    console.log("截图窗口关闭");
  };

  const config = {
    enableWebRtc: false, //是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
    completeCallback: callback,
    closeCallback: closeFn,
  };

  const changeScreenShot = () => {
    new screenShotPlugin(config);
  };
</script>

截图界面显示如下

更换配置

const config = {
  enableWebRtc: true,//启用webrtc
  wrcWindowMode: true,//启用窗口截图模式，值为boolean类型，默认为false，即当前标签页截图。如果标签页截图的内容有滚动条或者底部有空缺，可以考虑启用此模式。
  completeCallback: callback,
  closeCallback: closeFn,
};

截图界面显示如下：可以截取其它标签页和窗口，需要用户授权。截图操作稍显卡顿，和pc端截图软件相比，操作不是很流畅

tesseract.js

github地址： https://github.com/naptha/tesseract.js https://github.com/naptha/tesseract.js-core https://github.com/naptha/tessdata 训练数据

采用本地安装的形式，把训练数据和库代码下载到本地，可离线使用

<!DOCTYPE html>
<html>
  <head>
    <script src="../plugins/tesseract.js/tesseract.min.js"></script>
  </head>
  <body>
    <input type="file" id="imageUpload" accept="image/*" />
    <div id="result" style="margin-top: 20px; border: 1px solid #ccc; padding: 15px"></div>

    <script>
      let worker;

      (async function init() {
        try {
          worker = await Tesseract.createWorker("chi_sim", 1, {
            workerPath: "../plugins/tesseract.js/worker.min.js",
            langPath: "../plugins/tesseract.js/lang",
            corePath: "../plugins/tesseract.js-core",
          });
          console.log("OCR 引擎就绪");
        } catch (err) {
          console.error("初始化失败:", err);
        }
      })();

      document.getElementById("imageUpload").addEventListener("change", async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const resultDiv = document.getElementById("result");
        resultDiv.innerHTML = '<div style="color:gray">识别中...</div>';

        try {
          const {
            data: { text },
          } = await worker.recognize(file);

          resultDiv.innerHTML = `
          <h3 style="color:#2c3e50">识别结果：</h3>
          <pre style="white-space: pre-wrap;">${text.replaceAll(" ", "").trim()}</pre>
        `;
        } catch (err) {
          resultDiv.innerHTML = `<div style="color:red">错误: ${err.message}</div>`;
        }
      });
    </script>
  </body>
</html>

测试用例

识别结果：中文汉字基本准确，偶尔会有部分汉字识别错误，标点符号会有识别失误，比较容易出现空格问题，因此上面的代码中会替换空格。

截图识别

<script src="../plugins/screenShotPlugin.umd.js"></script>
<script src="../plugins/tesseract.js/tesseract.min.js"></script>
<div id="app">
  <div>截图插件文字展示</div>
  <div>截图插件文字展示</div>
  <div>Detection Date</div>
  <div>Detection Status</div>
  <br />
  <button onclick="changeScreenShot()">点击截图</button>
  <div id="result" style="margin-top: 20px; border: 1px solid #ccc; padding: 15px"></div>
</div>
<script type="text/javascript">
  let worker;

  (async function init() {
    try {
      worker = await Tesseract.createWorker("chi_sim", 1, {
        workerPath: "../plugins/tesseract.js/worker.min.js",
        langPath: "../plugins/tesseract.js/lang",
        corePath: "../plugins/tesseract.js-core",
      });
      console.log("OCR 引擎就绪");
    } catch (err) {
      console.error("初始化失败:", err);
    }
  })();

  // 截图确认按钮回调函数
  const callback = async ({ base64, cutInfo }) => {
    const resultDiv = document.getElementById("result");
    resultDiv.innerHTML = '<div style="color:gray">识别中...</div>';

    try {
      const {
        data: { text },
      } = await worker.recognize(base64, {
        oem: 1,
        psm: 6,
        preserve_interword_spaces: "0",
      });

      resultDiv.innerHTML = `
      <h3 style="color:#2c3e50">识别结果：</h3>
      <pre style="white-space: pre-wrap;">${text.trim()}</pre>
    `;
    } catch (err) {
      resultDiv.innerHTML = `<div style="color:red">错误: ${err.message}</div>`;
    }
  };
  // 截图取消时的回调函数
  const closeFn = () => {
    console.log("截图窗口关闭");
  };

  const config = {
    enableWebRtc: true,
    wrcWindowMode: true,
    completeCallback: callback,
    closeCallback: closeFn,
  };

  const changeScreenShot = () => {
    new screenShotPlugin(config);
  };
</script>

中英文字符一起识别时中文字符会出现空格问题。

posted @ 2025-05-14 09:44 carol2014 阅读(231) 评论(0) 收藏举报

刷新页面返回顶部