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.
$(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>
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?
