当前位置：首页 > VUE

vue实现文字识别

2026-02-19 22:09:15VUE

Vue 实现文字识别的方案

在 Vue 项目中实现文字识别（OCR）功能，可以通过以下方法实现：

使用 Tesseract.js 库

Tesseract.js 是一个基于 JavaScript 的 OCR 库，支持在浏览器中直接识别图片中的文字。安装方式如下：

npm install tesseract.js

示例代码：

import Tesseract from 'tesseract.js';

export default {
  methods: {
    recognizeText(imageFile) {
      Tesseract.recognize(
        imageFile,
        'eng', // 语言包（英文）
        { logger: m => console.log(m) }
      ).then(({ data: { text } }) => {
        console.log(text); // 识别结果
      });
    }
  }
}

调用第三方 OCR API

百度、腾讯、阿里云等平台提供 OCR API 服务，可通过 HTTP 请求调用：

export default {
  methods: {
    async callBaiduOCR(imageBase64) {
      const response = await fetch('https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
        },
        body: `image=${encodeURIComponent(imageBase64)}`
      });
      const result = await response.json();
      return result.words_result.map(item => item.words).join('\n');
    }
  }
}

使用原生 HTML5 API

对于简单场景，可通过 <input type="file"> 上传图片，结合 Canvas 提取文字（功能有限）：

<template>
  <input type="file" @change="handleImageUpload" accept="image/*">
</template>

<script>
export default {
  methods: {
    handleImageUpload(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          // 此处可结合其他 OCR 库处理 canvas 数据
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
}
</script>