Question

我正在尝试创建一个使用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 \ My First Project-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 \中解析'http2' build \ src”

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

任何人都可以给我一些有关如何运行该应用程序的建议吗？

Answer 1

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

您需要做的是在初始化您的Google projectId和JSON密钥文件时将其指定为credentials vision client如下：

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

创建使用Google Cloud-vision的ReactJS应用

1 个答案: