使用微软认知服务调用Computer Vision API(OCR)本地图片无返回问题

我之前也踩过这个坑！你遇到的问题大概率是base64格式不符合API要求或者请求体构造错误，咱们一步步来解决：

最常见的问题：Base64带了多余前缀 #

encodeImageFileAsURL用readAsDataURL返回的是完整的data:image/xxx;base64,xxxxxx格式字符串，但Azure Computer Vision的OCR API只需要纯base64部分（也就是逗号后面的内容）。如果直接把带前缀的字符串传进去，API会识别无效，自然不会返回结果。

修正后的代码示例 #

先修改编码函数，提取纯base64内容，再正确构造请求体：

function encodeImageFileAsURL(callback) {
  var filesSelected = document.getElementById("inputFileToLoad").files;
  if (filesSelected.length > 0) {
    var fileToLoad = filesSelected[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) {
      // 关键：去掉data URL前缀，只保留纯base64数据
      var pureBase64 = fileLoadedEvent.target.result.split(',')[1];
      callback(pureBase64);
    };
    fileReader.readAsDataURL(fileToLoad);
  }
}

// 调用编码函数并发送OCR请求
encodeImageFileAsURL(function(base64Data) {
  // 构造符合API要求的请求体
  const requestBody = {
    "base64": base64Data
  };

  fetch('https://<你的区域>.cognitiveservices.azure.com/vision/v3.2/ocr', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Ocp-Apim-Subscription-Key': '<你的API密钥>'
    },
    body: JSON.stringify(requestBody)
  })
  .then(res => {
    // 先检查响应状态码，排除权限/网络问题
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    return res.json();
  })
  .then(ocrResult => {
    console.log('识别结果：', ocrResult);
    // 这里处理你的业务逻辑
  })
  .catch(err => {
    console.error('出错了：', err);
  });
});

额外排查步骤 #

• 对比base64内容：在控制台打印pureBase64，和你手动粘贴到data: makeblob('')里的内容对比，确保完全一致。
• 检查网络请求：打开浏览器开发者工具的Network面板，查看发送的OCR请求，确认请求体里的base64字段是纯字符串，没有前缀；同时看响应状态码，如果是400，说明请求格式错误；如果是401，检查API密钥是否正确。
• 图片格式兼容性：部分特殊格式（比如带透明通道的PNG）可能有编码问题，可以尝试将图片转成JPEG后再测试。

内容的提问来源于stack exchange，提问作者Thuong Vo Tinh