What form of data do I send in "computer vision. describe image in stream" request?

Question

Hello, I'm trying to send a POST request with a local image. But I'm getting a 400 error "error processing HTTP request". I assume I'm sending the image in the wrong format. I have the image as a base64 string (data:image/png;base64,blahblahblah). What do I have to do with that string to make a successful request?

const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'multipart/form-data', 'Ocp-Apim-Subscription-Key': 'my api key here' },
            body: dataUrl
        };
       
        fetch('myEndpointHere/vision/v3.1/describe?overload=stream&maxCandidates=1', requestOptions)
            .then(async response => {
                const isJson = response.headers.get('content-type')?.includes('application/json');
                const data = isJson && await response.json();
                // check for error response
                if (!response.ok) {
                    // get error message from body or default to response status
                    const error = (data && data.message) || response.status;
                    return Promise.reject(error);
                }else{
                    console.log(data)
                }
                
            })
            .catch(error => {
                console.error('There was an error!', error);
            });

Answer 1

Hi @Alex Kondr

It seems like you are trying to send a base64-encoded image in the dataUrl variable as the body of the POST request. However, the headers you are using (Content-Type: multipart/form-data) are not appropriate for sending base64-encoded data. Instead, you should send the image as a binary payload with the correct Content-Type header for image data.

follow these kindly

1. Decode the base64 image data into binary format.
2. Set the correct Content-Type header for image data in the request.
3. Make the POST request with the binary image data.

// Assuming dataUrl contains the base64 image data (data:image/png;base64,blahblahblah)  // Step 1: Decode the base64 image data into binary format const base64Image = dataUrl.split(',')[1]; const binaryImage = atob(base64Image); const byteArray = new Uint8Array(binaryImage.length); for (let i = 0; i < binaryImage.length; i++) {   byteArray[i] = binaryImage.charCodeAt(i); }  // Step 2: Set the correct Content-Type header for image data in the request const requestOptions = {   method: 'POST',   headers: {     'Content-Type': 'application/octet-stream', // Set the correct Content-Type for image data     'Ocp-Apim-Subscription-Key': 'my api key here',   },   body: byteArray, // Use the binary image data as the request body };  // Step 3: Make the POST request with the binary image data fetch('myEndpointHere/vision/v3.1/describe?overload=stream&maxCandidates=1', requestOptions)   .then(async (response) => {     const isJson = response.headers.get('content-type')?.includes('application/json');     const data = isJson && (await response.json());     // check for error response     if (!response.ok) {       // get error message from body or default to response status       const error = (data && data.message) || response.status;       return Promise.reject(error);     } else {       console.log(data);     }   })   .catch((error) => {     console.error('There was an error!', error);   }); 

kindly accept if this helps thanks