用Vue 前端实现ocr

在Vue中实现OCR，同样可以使用Tesseract.js，以下是一个使用Vue和Tesseract.js实现OCR的示例：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <img :src="imageUrl" style="max-width: 500px; max-height: 500px;">
    <button @click="recognize">识别文字</button>
    <div>{{ result }}</div>
  </div>
</template>

<script>
import Tesseract from 'tesseract.js';

export default {
  data() {
    return {
      file: null,
      imageUrl: null,
      result: null,
    }
  },
  methods: {
    // 当用户选择文件时，显示选择的图片，用于预览
    onFileChange(event) {
      this.file = event.target.files[0];
      this.imageUrl = URL.createObjectURL(this.file);
    },
    // 当用户点击“识别文字”按钮时，对图片中的文字进行识别
    recognize() {
      const img = new Image();
      img.src = this.imageUrl;

      // 使用Tesseract.js进行文字识别
      Tesseract.recognize(img, 'eng', {
        logger: m => console.log(m)
      }).then(({ data: { text } }) => {
        this.result = text;
      });
    }
  }
}
</script>

这个示例使用Vue的单文件组件实现，包含一个文件选择框，一个图片预览区域，一个“识别文字”按钮以及一个结果显示区域。当用户选择图片并点击“识别文字”按钮时，使用Tesseract.js对图片中的文字进行识别，并将结果显示在结果显示区域中。