无法将图像发送到 azure API

Question

我正在使用亚马逊制作 OCR 应用程序。我正在使用本机反应的应用程序。而且我发送数据的那一刻出错了

错误：

{ "code": "InvalidImageUrl", "requestId": "c495b0d7-a65a-4138-97a9-2b1cb25dced8", "message": "Image URL is badly formatted." }

为什么？我究竟做错了什么？代码：

// ...

  selectImage() {
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };
        this.setState({ imageSource: source });
    
        this.extractText(response.uri);
      }
    });
  }

  extractText = async (imageSource) => {

    // alert(imageSource)
  
    let subscriptionKey = ['CODE'];
    let endpoint = ['ENDPOINT']
    if (!subscriptionKey) { throw new Error('Set your environment variables for your subscription key and endpoint.'); }
    
    var uriBase = endpoint + "vision/v2.1/ocr";

    // Request parameters.
 

    // Display the image.
    var sourceImageUrl = imageSource;

    const data = new FormData();
    data.append(imageSource);

fetch(uriBase + "?" + {
        "language": "unk",
        "detectOrientation": "true",
    },
{
 
 method: 'POST',
 headers: 
 {
     'Content-Type': 'application/json',
     'Ocp-Apim-Subscription-Key': subscriptionKey,
 },
 body: '{"url": ' + '"' + data + '"}',


}).then((response) => response.json()).then((data) =>
{

  console.log(JSON.stringify(data, null, 2));

}).catch((error) =>
{
 console.log(error);

});
  };  
}

export default ImagePickerScreen;

Answer 1

根据您的代码，您的 data 有问题，它应该是图像 URL 以便 Azure 版本服务可以访问它。我不太确定您如何在自定义逻辑中获得 data。但无论如何，下面的代码片段有效，请试一试：

const data = 'https://stanstroage.blob.core.windows.net/container2/personPic.jpg';

let subscriptionKey = '<key>';
let endpoint = '<endpoint>';
if (!subscriptionKey) { throw new Error('Set your environment variables for your subscription key and endpoint.'); }

var uriBase = endpoint + "vision/v2.1/ocr";

fetch(uriBase + "?" + {
    "language": "unk",
    "detectOrientation": "true",
},
{
method: 'POST',
headers: 
    {
    'Content-Type': 'application/json',
    'Ocp-Apim-Subscription-Key': subscriptionKey,
    },
body: '{"url": ' + '"' + data + '"}',
}).then((response) => response.json()).then((data) =>
{
console.log(JSON.stringify(data, null, 2));
}).catch((error) =>
{
console.log(error);
});

结果：

如果要上传本地图片，请使用application/octet-stream作为请求content-type并将图片内容缓冲区设置为请求正文。您可以使用 react-native-fs to read your local image content and use buffer 获取图像内容缓冲区并将其 post 发送到 Azure 端，尝试下面的代码片段：

let subscriptionKey = '<key>';
let endpoint = '<endpoint>';
let fileUri = '<fileUri>';
let base64 =  await fs.readFile(fileUri, 'base64');
let data = Buffer.from(base64, 'base64');

console.log(data);

if (!subscriptionKey) { throw new Error('Set your environment variables for your subscription key and endpoint.'); }

var uriBase = endpoint + "vision/v2.1/ocr";

fetch(uriBase + "?" + {
    "language": "unk",
    "detectOrientation": "true",
},
{
method: 'POST',
headers: 
    {
    'Content-Type': 'application/octet-stream',
    'Ocp-Apim-Subscription-Key': subscriptionKey,
    },
body: data,
}).then((response) => response.json()).then((data) =>
{
console.log(JSON.stringify(data, null, 2));
}).catch((error) =>
{
console.log(error);
});

结果：

无法将图像发送到 azure API

Can't send image to azure API

ocr

azure

reactjs

react-native