Как отправить изображение base64 в Microsoft-ocr api? - PullRequest
Новая
       12

Как отправить изображение base64 в Microsoft-ocr api?

0 голосов
/ 25 апреля 2019

Я пытаюсь использовать API-интерфейс Microsoft Azure OCR для извлечения текста из изображения.

Изображение, которое я имею для отправки в службу API, имеет структуру "data: image / png; base64", и поэтому я не могу отправить его с типом содержимого "application / json".

Я попытался отправить его с типом содержимого "multipart / form-data" или "application / octet-stream", но это также не удалось ... 

// this "url" gives me the "data:data:image/png;base64, " code
var sourceImageUrl = document.getElementById("myImage").src;

    // Perform the REST API call.
    $.ajax({
        url: uriBase + "?" + $.param(params),

        // Request headers.
        beforeSend: function(jqXHR){
            jqXHR.setRequestHeader("Content-Type","multipart/form-data");
            jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
        },

        type: "POST",

        // Request body.
        data: [sourceImageUrl]
    })

    .done(function(data) {
        // Show formatted JSON on webpage.
        $("#responseTextArea").val(JSON.stringify(data, null, 2));
    })

    .fail(function(jqXHR, textStatus, errorThrown) {
        // Display error message.
        var errorString = (errorThrown === "") ?
            "Error. " : errorThrown + " (" + jqXHR.status + "): ";
        errorString += (jqXHR.responseText === "") ? "" :
            (jQuery.parseJSON(jqXHR.responseText).message) ?
                jQuery.parseJSON(jqXHR.responseText).message :
                jQuery.parseJSON(jqXHR.responseText).error.message;
        alert(errorString);
    });

Я немного озадачен тем, как мне следует посылать изображение или делать какие-то преобразования.

Какой тип контента я должен использовать, чтобы сделать правильный запрос? Должен ли я изменить кодировку источника изображения? Как?

Спасибо всем!

1 Ответ

0 голосов
/ 26 апреля 2019

Наконец-то я заработал, добавив функцию makeBlob, которая возвращает блоб из кода base64. Я также установил тип содержимого "application / octet-stream".

Итоговый код выглядит так: 

    function makeblob(b64Data, contentType, sliceSize) {
     contentType = contentType || '';
     sliceSize = sliceSize || 512;

     var byteCharacters = atob(b64Data);
     var byteArrays = [];

     for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
         var slice = byteCharacters.slice(offset, offset + sliceSize);

         var byteNumbers = new Array(slice.length);
         for (var i = 0; i < slice.length; i++) {
             byteNumbers[i] = slice.charCodeAt(i);
         }

         var byteArray = new Uint8Array(byteNumbers);

         byteArrays.push(byteArray);
     }

     var blob = new Blob(byteArrays, { type: contentType });
     return blob;
 }


function recognizeText() {
    imageToSend = image.src;

    binDataImage = imageToSend.replace("data:image/png;base64,","");

        // Perform the REST API call.
        $.ajax({
            url: uriBase + "?" + $.param(params),

            // Request headers.
            beforeSend: function(jqXHR){
                jqXHR.setRequestHeader("Content-Type","application/octet-stream");
                jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
            },

            type: "POST",

            // Request body.
            data: makeblob(binDataImage, 'image/jpeg'),
            cache: false,
            processData: false
        })

        .done(function(data) {
            // Show formatted JSON on webpage.
            $("#responseTextArea").val(JSON.stringify(data, null, 2));
        })

        .fail(function(jqXHR, textStatus, errorThrown) {
            // Display error message.
            var errorString = (errorThrown === "") ?
                "Error. " : errorThrown + " (" + jqXHR.status + "): ";
            errorString += (jqXHR.responseText === "") ? "" :
                (jQuery.parseJSON(jqXHR.responseText).message) ?
                    jQuery.parseJSON(jqXHR.responseText).message :
                    jQuery.parseJSON(jqXHR.responseText).error.message;
            alert(errorString);
        });
  };
...