如何将base64映像发送到Microsoft-OCR API?

时间:2019-04-25 14:24:10

标签: image api binary base64 microsoft-ocr

我正在尝试使用Microsoft Azure OCR API服务从图像中提取一些文本。

我要发送到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 :(得分:0)

我终于通过添加makeBlob函数使它正常工作,该函数从base64代码中返回一个blob。我还将内容类型设置为“ 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);
        });
  };