时间戳

首页 > 解决方案 > 创建一个使用 google cloud-vision 的 reactjs 应用程序

reactjs - 创建一个使用 google cloud-vision 的 reactjs 应用程序

问题描述

我正在尝试创建一个使用 google-cloud-vision 的 Reactjs 应用程序，但我正在努力让示例代码正常工作。我刚刚开始学习 React-js，所以对于如何更改为 Node.Js 创建的示例代码以使其正常工作，我有点迷茫。

我首先访问了https://cloud.google.com/vision/docs/quickstart-client-libraries?authuser=1&hl=sv并启用了所有必需的东西（计费并启用了 api）。然后我创建了一个新的服务帐户并下载了 json 文件。

然后我使用命令“npx create-react-app cloud-vision”在我的电脑上创建了一个新项目。我在放置 json 文件的项目的根目录中创建了一个凭据文件夹。我创建了一个 .env 文件，在其中输入了环境变量：

GOOGLE_APPLICATION_CREDENTIALS="C:\Development\Projects\cloud-vision\credentials\我的第一个项目-b38ff120f2ad.json"

然后我使用以下命令安装了 cloud-vision npm： npm install --save @google-cloud/vision

下一步是从https://cloud.google.com/vision/docs/ocr?authuser=1&hl=sv找到我想要使用的 OCR 的示例代码

然后我尝试了 npm start

import React from 'react';
import logo from './logo.svg';
import './App.css';
import testImage from './images/image--002.png'
import vision from '@google-cloud/vision'

function App() {

  const googleVison = async () => {
    // const vision = require('@google-cloud/vision');

    // Creates a client
    const client = new vision.ImageAnnotatorClient();

    /**
     * TODO(developer): Uncomment the following line before running the sample.
     */
    const fileName = testImage;

    // Performs text detection on the local file
    const [result] = await client.textDetection(fileName);
    const detections = result.textAnnotations;
    console.log('Text:');
    detections.forEach(text => console.log(text));
  }

googleVison()

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

由于我是 React 新手并且没有真正获得 Node.js，我主要希望在控制台中显示一些我可以理解的东西，以便我可以做更多的研究。我的第一个问题是我不知道如何替换“const vision = require('@google-cloud/vision');” 所以我试着只导入它。那正确吗？另外我不知道我是否可以直接使用 Node.js 代码，或者我是否必须以某种方式对其进行更改。但是，如果我在应用程序启动时查看控制台，我会收到一条错误消息：“找不到模块：无法解析 'C:\Development\Projects\cloud-vision\node_modules@grpc\grpc-js\构建\src"

然后我尝试了 npm 安装 http2 ，但出现了一个新错误（我不记得了，但如果这对于让应用程序正常运行很重要，我可以再试一次。）

谁能给我一些关于如何让应用程序运行的建议？

标签： reactjsgoogle-cloud-vision

解决方案

首先，React 不会识别你的环境变量GOOGLE_APPLICATION_CREDENTIALS。REACT_APP_您必须为所有自定义环境变量使用前缀。

您需要做的是在初始化时 指定您的 GoogleprojectId和 JSON 密钥文件，如下所示：credentialsvision client

const options = { 
    credentials = require('/path/to/key/json'),
    projectId = 'Your Google Cloud Project ID'
};
const client = new vision.ImageAnnotatorClient(options);

推荐阅读