我正在使用此代码https://docs.microsoft.com/en-in/azure/cognitive-services/computer-vision/quickstarts/javascript#AnalyzeImage使用microsoft azure API分析图像。但它需要一个URL作为输入。
我想从本地计算机而不是网址上传图片。
需要帮助。
答案 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;
答案 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?