使用 Google Cloud Vision 构建 React JS PWA

Question

我收到此错误：

get @ @google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24811
Show 1 more frame
Show less
@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24910 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/google-auth-library/build/src/auth/authclient.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24910:45)
    at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
    at node_modules/google-auth-library/build/src/auth/oauth2client.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:25051:24)
    at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
    at node_modules/google-auth-library/build/src/auth/computeclient.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:25700:26)
    at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
    at node_modules/google-auth-library/build/src/auth/googleauth.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:29193:27)
    at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
    at node_modules/google-auth-library/build/src/index.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:30145:24)

我已仔细遵循本文档 这是我的代码

import React, { useState } from 'react';
import vision from '@google-cloud/vision'

const Scan = () => {
  const [imageFile, setImageFile] = useState(null);
  const [text, setText] = useState('');

  const keyFilename = '../../../../CloudVision.json'; 


  const handleImageChange = (event) => {
    const newImageFile = event.target.files[0];
    setImageFile(newImageFile);
  };

  const detectText = async () => {

    if (!imageFile) {
      return;
    }

    try {
      const client = new vision.ImageAnnotatorClient({
        keyFilename,
      });

      const [result] = await client.textDetection(imageFile);
      const fullTextAnnotation = result.fullTextAnnotation;
      setText(fullTextAnnotation.text);
    } catch (error) {
      console.error('Error:', error);
      // Handle errors appropriately (e.g., display an error message)
    }`your text`
  };



  return (
    <div id='Scan'>
        <input type="file" accept="image/*" onChange={handleImageChange} />
        <button onClick={detectText}>Detect Text</button>
        {text && <p>Extracted Text: {text}</p>}
    </div>
  );
};

export default Scan;

Answer 1

经过几个小时的研究，如果你没有在你的网络应用程序中使用nodejs（服务器），我找到了一个解决方法。您可以做的是在谷歌云函数中提取文本，该函数充当服务器并处理谷歌云视觉 API，我认为它是为服务器端构建的