Vue如何辨識圖片中的文字，並將這些文字轉換成文本

2024.09.26

1. vue如何辨識圖片中的文字，並將這些文字轉換成文本

在Vue.js 中處理影像中的文字辨識（OCR - Optical Character Recognition），通常需要藉助外部函式庫或服務來實作。

Vue.js 本身就是一個用來建立使用者介面的JavaScript 框架，並不會直接支援OCR 功能。

但是，你可以整合第三方的OCR 解決方案，例如Tesseract.js 或使用API 服務如Google Cloud Vision API。

1.1. 使用Tesseract.js

Tesseract.js 是一個基於Tesseract OCR 引擎的JavaScript 函式庫，它可以讓你在前端辨識影像中的文字。

Tesseract OCR 是一個非常流行的光學字元辨識工具，最初由HP 公司開發，後來由Google 繼續維護和發展。

Tesseract.js 則是將這個強大的OCR 引擎封裝成了可以在瀏覽器環境中運作的形式，使得網頁應用程式可以直接使用OCR 技術而無需依賴伺服器端處理。

1.1.1. 安裝Tesseract.js

首先，你需要將Tesseract.js 加入你的專案。如果你使用的是npm 和Node.js 的環境，可以透過npm 安裝：

1. npm install tesseract.js

1.1.2. 使用Tesseract.js

接下來是如何在Vue.js 專案中使用Tesseract.js 進行影像辨識的範例：

導入Tesseract.js :
在你的Vue 元件中導入Tesseract.js。

1. import Tesseract from 'tesseract.js'

建立一個方法來識別圖像中的文字:
創建一個方法來處理圖像上傳，並使用Tesseract.js 來識別圖像中的文字。

1.export default {
2. data() {
3.   return {
4.      imageSrc: '', // 图片路径
5.      textResult: '' // 识别后的文字结果
6.    };
7.  },
8.  methods: {
9.    async recognizeText() {
10.      try {
11.        const result = await Tesseract.recognize(
12.          this.imageSrc, // 图像源
13.          'eng', // 语言模型，这里使用英语
14.          {
15.            logger: (m) => {
16.              if (m.status === 'recognizing text') {
17.                console.log(m);
18.              }
19.            }
20.          }
21.        );
22.        this.textResult = result.data.text;
23.      } catch (error) {
24.        console.error('Error during OCR:', error);
25.      }
26.    },
27.    handleImageUpload(event) {
28.      const file = event.target.files[0];
29.      if (!file) return;
30.      const reader = new FileReader();
31.      reader.onload = (e) => {
32.        this.imageSrc = e.target.result;
33.        this.recognizeText(); // 上传后立即识别
34.      };
35.      reader.readAsDataURL(file);
36.    }
37.   }
38. };

在範本中新增檔案輸入控制項:
在Vue 範本中新增一個檔案輸入框，以便使用者可以選擇要上傳的影像。

1.<template>
2.  <div>
3.    <input type="file" @change="handleImageUpload" accept="image/*">
4.    <p v-if="textResult">{{ textResult }}</p>
5.  </div>
6. </template>

這樣，當使用者上傳一張圖片後，Tesseract.js 將會辨識其中的文字，並將結果顯示在頁面上。

請注意，OCR 的準確率取決於許多因素，例如影像品質、文字清晰度以及使用的語言模型等。此外，識別過程可能會比較耗時，特別是對於較大的圖像或複雜的文字格式。

1.2. 使用Google Cloud Vision API

如果你選擇使用Google Cloud Vision API 進行OCR，你需要有一個有效的Google Cloud 帳戶並且啟用Vision API。然後，可以透過傳送請求到API 來處理影像中的文字辨識。

1.2.1. 設定Google Cloud API:

取得API 金鑰並配置你的應用程式以使用該API。

1.2.2. 發送請求到API:

使用Axios 或Fetch API 傳送影像資料到Google Cloud Vision API，並解析傳回的結果。

由於涉及網路請求，這種方式可能會增加應用程式的複雜性，包括錯誤處理、API 呼叫頻率限制等。

請確保在使用任何第三方程式庫或服務時遵循其許可協議，並注意資料安全和隱私保護。

以上就是在Vue.js 中辨識圖片中文字的一種方法。

具體實作可能還需要根據你的實際需求調整程式碼邏輯。

新聞