如何使用javascript在microsoft azure分析图像API中发布图像而不是URL?

时间:2018-01-11 06:59:07

标签: javascript computer-vision microsoft-cognitive azure-cognitive-services

我正在使用此代码https://docs.microsoft.com/en-in/azure/cognitive-services/computer-vision/quickstarts/javascript#AnalyzeImage使用microsoft azure API分析图像。但它需要一个URL作为输入。

我想从本地计算机而不是网址上传图片。

需要帮助。

2 个答案:

答案 0 :(得分: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));
        })

             }
         });
        

         
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

假设您有一个像

这样的html页面
<input type="file" id="myImage" />

最好的选择可能是 a)将myImage转换为bases64字符串 b)然后在ajax调用中将blob作为数据属性发布

通过使用base64和博客,有另一篇类似于帖子图片的帖子: How to post an image in base64 encoding via .ajax?