Question

我尝试将本地图像导入计算机视觉API（OCR）。但是当我尝试运行它时，它完全没有返回任何东西。

如果我尝试将原始图像粘贴到数据中：makeblob（＆＃39;＆＃39;）它可以工作，但是当我使用函数get变量本地图像encodeImageFileAsURL（）时，它什么都不返回。我可以获得原始图像二进制文件（base64），但是当我尝试将其转换为数据以发送到Cognitive服务时，它什么都没发生。

＆＃13;

    function encodeImageFileAsURL() {
      var filesSelected = document.getElementById("inputFileToLoad").files;
      if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) {
          var srcData = fileLoadedEvent.target.result; // <--- data: base64

          var newImage = document.createElement('img');
          newImage.src = srcData;

          document.getElementById("textBase64").innerHTML = srcData;
          //alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
          //console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        }
        fileReader.readAsDataURL(fileToLoad);

      }

    }
    var a = document.getElementById("textBase64").value;

    function processImage() {
      // **********************************************
      // *** Update or verify the following values. ***
      // **********************************************

      makeblob = function(dataURL) {
        var BASE64_MARKER = ';base64,';
        if (dataURL.indexOf(BASE64_MARKER) == -1) {
          var parts = dataURL.split(',');
          var contentType = parts[0].split(':')[1];
          var raw = decodeURIComponent(parts[1]);
          return new Blob([raw], {
            type: contentType
          });
        }
        var parts = dataURL.split(BASE64_MARKER);
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }

        return new Blob([uInt8Array], {
          type: contentType
        });
      }




      // Replace the subscriptionKey string value with your valid subscription key.
      var subscriptionKey = "SORRY I CAN'T PUBLIC MY KEY";

      // Replace or verify the region.
      //
      // You must use the same region in your REST API call as you used to obtain your subscription keys.
      // For example, if you obtained your subscription keys from the westus region, replace
      // "westcentralus" in the URI below with "westus".
      //
      // NOTE: Free trial subscription keys are generated in the westcentralus region, so if you are using
      // a free trial subscription key, you should not need to change this region.
      var uriBase = "https://southeastasia.api.cognitive.microsoft.com/vision/v1.0/ocr";

      // Request parameters.
      var params = {
        "language": "unk",
        "detectOrientation ": "true",
      };

      // Display the image.
      var sourceImageUrl = document.getElementById("inputFileToLoad").value;
      document.querySelector("#sourceImage").src = sourceImageUrl;

      // 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",
          processData: false,


          // Request body.
          data: makeblob("'" + a + "'"),
        })

        .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);
        });
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Optical Character Recognition (OCR):</h1>
Enter the URL to an image of printed text, then click the <strong>Read image</strong> button.
<br><br>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<textarea rows="10" cols="60" id="textBase64"></textarea>

<br><br> Image to read: <input type="text" name="inputImage" id="inputImage" value="" />
<button onclick="processImage()">Read image</button>
<br><br>
<div id="wrapper" style="width:1020px; display:table;">
  <div id="jsonOutput" style="width:600px; display:table-cell;">
    Response:
    <br><br>
    <textarea id="responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea>
  </div>
  <div id="imageDiv" style="width:420px; display:table-cell;">
    Source image:
    <br><br>
    <img id="imageTest" width="400" />
    <div id="imageTest"></div>
  </div>
</div>

＆＃13;

<h1>Optical Character Recognition (OCR):</h1>
Enter the URL to an image of printed text, then click the <strong>Read image</strong> button.
<br><br>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<textarea rows="10" cols="60" id="textBase64"></textarea>

<br><br> Image to read: <input type="text" name="inputImage" id="inputImage" value="" />
<button onclick="processImage()">Read image</button>
<br><br>
<div id="wrapper" style="width:1020px; display:table;">
  <div id="jsonOutput" style="width:600px; display:table-cell;">
    Response:
    <br><br>
    <textarea id="responseTextArea" class="UIInput" style="width:580px; height:400px;"></textarea>
  </div>
  <div id="imageDiv" style="width:420px; display:table-cell;">
    Source image:
    <br><br>
    <img id="imageTest" width="400" />
    <div id="imageTest"></div>
  </div>
</div>

Answer 1

由于a已经是一个字符串，因此您不希望在调用makeBlob时引入额外的引号，因为这会导致atob调用失败。你想简单地说：

// Request body.
data: makeblob(a),

使用Microsoft Cognitive Services的本地映像

1 个答案: