How to post image instead of URL in microsoft azure analyze image API using javascript ?

Question

I am doing the analyzing of image using microsoft azure API using this code https://learn.microsoft.com/en-in/azure/cognitive-services/computer-vision/quickstarts/javascript#AnalyzeImage . But it takes a URL as input.

I want to upload an image from local machine instead of URL.

Help needed.

Answer 1

         $(document).ready(function () {

             //Step 1. Hook into the myFile input file change event



            var subKey = '[your key]';

             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;
             }

             $('#myImage').change(function () {

                 //Load everything in
                 var reader = new FileReader();
                 var file = this.files[0];
               //  var mb = $(this).serializeObject();
                 console.log(file);
                 reader.onload=  function() {
                     var resultData = this.result;

                     
                   
                   
                 //     console.log(resultData);
                     
                          
                     resultData = resultData.split(',')[1];
                     
                     processImage(resultData);
                    // processImage(mb);
                 };

                
                 reader.readAsDataURL(file);

             });

             processImage = function(binaryImage) {
           
          
            
                 
              //   var uriBase = "https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze";
                 var uriBase = "https://eastus.api.cognitive.microsoft.com/vision/v1.0/analyze";

                 //    // Request parameters.
                 var params = {
                     "visualFeatures": "Categories,Description,Color",
                     "details": "",
                     "language": "en",
                 };

                 $.ajax({
                     url: "https://eastus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Categories&language=en",
                     
                    method: "POST",
                    type: "POST",
                     beforeSend: function (xhrObj) {
                         xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subKey);
                        

                     },
                     contentType: "application/octet-stream",
                     mime: "application/octet-stream",   
                     data: makeblob(binaryImage, 'image/jpeg'),
                     cache: false,
                     processData: false
               
                   
                 }) .done(function(data) {
            // Show formatted JSON on webpage.
            $("#responseTextArea").val(JSON.stringify(data, null, 2));
        })

             }
         });
        

         

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
    <input type="file" id="myImage" />
    <input type="submit" />
    <textarea  type="text" rows="5" cols="50" id="responseTextArea" />
    </form>

Answer 2

Assuming you have an html page like

<input type="file" id="myImage" />

the best option might be to a)convert myImage to a bases64 string b) then post a blob as the data attribute in ajax call

There was another post similar to post images by using base64 and a blog here: How to post an image in base64 encoding via .ajax?