将Base64映像字符串传递给调用Cloud Vision API的Firebase可调用云函数

Question

我正在实现一个Web应用程序，该应用程序使用Cloud Vision API来检测用户生成的图像上的文本。

我正在使用React和Firebase云函数。

流程如下：

• 用户从画廊或相机获取图像，使用react image croppackage

客户代码

const canvasBase64 = canvas.toDataURL("image/jpeg", 1.0);

const result = await firebase.functions().httpsCallable("readTextFromImage")({
  image: canvasBase64
});

setTextareaValue(result.data.text);

云函数代码

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();

async function readTextFromImage(data)  {

  const imgBase64 = data.image;
  const [textDetections] = await vision.textDetection(imgBase64);

  // OTHER THINGS I'VE TRIED HERE
  
  const buffer = new Buffer(imgBase64, 'base64');
  const arraybuffer  = Uint8Array.from(buffer).buffer;
  const [textDetections] = await vision.textDetection(buffer);
  const [textDetections] = await vision.textDetection(arraybuffer);
}

注：

base 64映像似乎是正确生成的。

来自节点上的谷歌文档。js Vision API：

https://googleapis.dev/nodejs/vision/latest/v1.ImageAnnotatorClient.html#textDetection

我们得到：

在尝试使用缓冲区时，我得到了no image present并传递了base64字符串，我得到了code:enametolong

问题

我应该如何将base 64字符串转换为Cloud Vision API将接受的内容？

Answer 1

我就是这样解决的。

我打开了一个Github问题，在那里我得到了更多的细节。

https://github.com/googleapis/nodejs-vision/issues/808

客户代码

我必须删除base 64字符串的第一部分。

这部分："data： Image/jpeg； base 64，"

const result = await firebase.functions().httpsCallable("readTextFromImage")({
  image: canvasBase64.split("base64,")[1]  // <--- REMOVES THE FIRST PART OF THE STRING
});

云函数代码*

此外，我还必须使用{image:{content:base64String}}

const [textDetections] = await vision.textDetection(
  {
    image: {
      content: imgBase64
    }
  }
);

尽管这与以下文件不符：

https://googleapis.dev/nodejs/vision/latest/v1.ImageAnnotatorClient.html#textDetection

但是我从另一篇文章中得到了这个想法：

https://cloud.google.com/vision/docs/base64