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

Question

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

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

流程如下：

• 用户从相册或相机获取图像，使用 react-image-crop 程序包裁剪图像
• 此包使用 <canvas> 元素生成裁剪图像
• 我正在使用 canvas.toDataURL("image/jpeg",1.0);
将图像转换为 base64
• 我正在将 imageBase64 字符串传递给云函数
• 云函数需要读取图片调用云视觉API

客户端代码

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);
}

注意：

base64 图像似乎生成正确。

来自 Google 关于 Node.js 愿景的文档 API:

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

我们明白了：

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

问题

我应该如何将 base64 字符串转换成 Cloud Vision API 可以接受的内容？

Answer 1

我就是这样解决的。

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

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

客户端代码

我不得不删除 base64 字符串的第一部分。

这部分："data:image/jpeg;base64,"

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

云函数代码*

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

的对象调用 textDetection

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