Question

我正在尝试从React相机组件发出Google Cloud Vision API请求，并将我的图像作为base64编码的字符串直接发送到API。具体来说，我正在使用react-camera npm通过用户的网络摄像头或前置（自拍）移动相机获取用户的照片。

我一直收到的错误是“错误：没有图像”。经过数小时的尝试，尝试了各种方法来对Blob数据进行编码，解码，字符串化和其他方式处理后，我无法将图像转换为有效的格式。这是我的camera.js组件的相关部分：

A, B = zip(*Z)

这是我的API请求路由的相关部分：

import React, { Component } from 'react';
import axios from 'axios';
import Camera from 'react-camera';
import 'react-html5-camera-photo/build/css/index.css'
...

export default class App extends Component {

  constructor(props) {
    super(props);
    this.takePicture = this.takePicture.bind(this);
    this.state = {blob:''};
    this.confirmphoto.bind(this)
  }

  takePicture() {
     this.camera.capture()
     .then(blob => {
        this.img.src = URL.createObjectURL(blob)
        this.img.onload = () => {
           URL.revokeObjectURL(this.src)
        }
        this.setState({
           blob:blob
        })
     })
  }

  confirmphoto() {
     console.log("blob contents:", this.state.blob);
     axios.post(process.env.REACT_APP_BACK_END_SERVER + 'submitChallenge', this.state.blob)
     .then((res)=>{
        console.log(res);
     })
     .catch((err)=>{
        console.log(err);
     });//end axios call
  }

使用策略性放置的控制台日志，数据确实可以作为对象传递，但它是几行加密数据，如下所示：

var express = require('express');
var router = express.Router();
...
const vision = require('@google-cloud/vision');
const client = new vision.ImageAnnotatorClient();

function pictureIsValid(pictureFile) {

   // Stringify raw blob data
   var newObj = JSON.stringify(pictureFile);
   console.log(newObj);

   // Convert blob to base64
   var newObj = Buffer.from(newObj).toString('base64');
   console.log(newObj);

   // JSON request for Google Cloud Vision API

   const request = {
      "requests":[
          {
            "image":{
               "content": newObj
            },
            "features":[
               {
                  "type":"LABEL_DETECTION",
                  "maxResults":1
               }
            ]
         }
      ]
   };

   // Making the request
   client.annotateImage(request)
   .then(function(res){
      console.log("result: ", res);
   })
   .catch(function(err){
      console.log(err);
   });
};

router.post('/', function (req, res) {
   var data = req.body;
   console.log("data passed type:", typeof data);
   var test = pictureIsValid(data);
   res.sendStatus(200).send();
});

这是前述的base64转换后在终端中显示的内容：

{ ' ����\u0000\u0010JFIF\u0000\u0001\u0001\u0001\u0000H\
u0006\b\u0007\u0007\b\n\u0011\u000b\n\t\t\n\u0014\u000f\
u0017\u001a\u001d% \u001a\u001c#\u001c\u0017\u0017!,!#\'
(***\u0019\u001f.1-)1%)*(\u0001\u0007\b\b\n\t\n\u0013\u0
00b\u000b\u0013(\u001b\u0017\u001b(((((((( ...u000f\u000
7���j���_\'i�F;��`�Ҿ���\u0017R�l�פ�)�q�y��f��\r��i�S�S\\
�4\u0010\nv)qJ)�W\u0013\u0014���.*�q���8�LRaq���8�*����':
'' }

看起来像base64，这应该是Google Cloud Vision API可以接受的，但是我一直回想起“没有图像”的错误。我也尝试过提交Blob本身，Blob的字符串化和非字符串化版本以及base64查找数据。

我暗中怀疑blob数据甚至都不是图像数据。有谁知道我要去哪里错了？我需要切换其他摄像头/网络摄像头节点软件包吗？

来自React网络摄像头的Google Cloud Vision API请求错误：“无图像”

0 个答案: