如何使用 React 将本地图像而不是 URL 发送到计算机视觉 API

Posted 2023-04-17

【中文标题】如何使用 React 将本地图像而不是 URL 发送到计算机视觉 API

【英文标题】：How to send a local image instead of URL to Computer Vision API using React

【发布时间】：2021-12-03 21:46:11

【问题描述】：

我想上传本地图像文件并从中提取文本。我点击了下面的链接，当我传递 URL 时它按预期工作。 https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/static-web-app/add-computer-vision-react-app

我设法为本地图像配置并获取上传图像的 base64 编码 dataURL。但是当我将 base64 编码的 dataURL 传递给 Computer Vision API 时，它会显示“输入数据不是有效图像”（POST 400 状态代码）。我在下面显示的行中收到错误： const analysis = await computerVisionClient.analyzeImage(urlToAnalyze, visualFeatures );

我包含的用于处理本地图像的代码：

 const handleChange = (e) => 
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onloadend = function()
    
        setFileSelected(reader.result) // this is the base64 encoded dataurl
    
   reader.readAsDataURL(file);

在computerVision.js 文件中，我已将标题中的“contentType”更改如下。

 const computerVisionClient = new ComputerVisionClient(
    new ApiKeyCredentials( inHeader: 'Ocp-Apim-Subscription-Key': key, 'Content-Type': 'application/octet-stream' ), endpoint);

我尝试根据 computerVision.js 中的文档将 client.read() 替换为 readTextInStream() （请参阅上面的链接），但仍然抛出错误。

我可以知道为什么我收到错误“输入数据不是有效图像”吗？谢谢。

【参考方案1】：

这里是输入要求的link。

微软提供了一个全新的在线门户https://preview.vision.azure.com/demo/OCR

优点是它会直接列出你可用的资源，所以你只需要选择合适的，然后你测试，还有一些样本。