使用Azure图像描述API时Canvas转Base64传图报400无效图像错误

• 核心问题：你将Base64字符串直接作为请求体发送，但application/octet-stream要求的是二进制图像数据，而非Base64编码后的文本字符串，导致API无法识别输入内容。
• 额外问题：fetch调用未添加await，直接调用response.json()会因response是Promise对象而报错。

修正后的代码 #

imageDescribe = async () => {
  try {
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, 200, 200);  
    // 提取Base64编码部分
    const base64Data = canvas.toDataURL().replace(/^data:image\/(png|jpeg);base64,/, '');
    // 将Base64解码为二进制Uint8Array
    const binaryStr = atob(base64Data);
    const uint8Array = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
      uint8Array[i] = binaryStr.charCodeAt(i);
    }

    const subscription = 'xxx';
    const endpoint = 'https://eastus.api.cognitive.microsoft.com/vision/v2.0/analyze?visualFeatures=Description&language=en';
    
    // 给fetch添加await，确保获取到响应对象
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/octet-stream',
        'Ocp-Apim-Subscription-Key': subscription
      },
      body: uint8Array
    });
    const data = await response.json();
    console.log(data);
    console.log(response.status);
  } catch (error) {
    console.log(error);
  }
}

可选简化方案 #

使用Blob处理二进制数据，代码更简洁：

imageDescribe = async () => {
  try {
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, 200, 200);  
    const base64Data = canvas.toDataURL().replace(/^data:image\/(png|jpeg);base64,/, '');
    // 将Base64转为Blob
    const blob = await fetch(`data:image/png;base64,${base64Data}`).then(res => res.blob());

    const subscription = 'xxx';
    const endpoint = 'https://eastus.api.cognitive.microsoft.com/vision/v2.0/analyze?visualFeatures=Description&language=en';
    
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/octet-stream',
        'Ocp-Apim-Subscription-Key': subscription
      },
      body: blob
    });
    const data = await response.json();
    console.log(data);
    console.log(response.status);
  } catch (error) {
    console.log(error);
  }
}

内容的提问来源于stack exchange，提问作者Tanishq Jaiswal