forked from Noahnrg/AnalyzeFaceSample
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (85 loc) · 3.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Detect Faces Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script>
var baseURL = "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";
var subKey = '00081cfe7a7d493eb8cef4ef5304434a';
var params = {
"returnFaceId": "true",
"returnFaceLandmarks": "false",
"returnFaceAttributes": "age,gender,headPose,smile,facialHair,glasses,emotion," +
"hair,makeup,occlusion,accessories,blur,exposure,noise"
};
</script>
<body>
<div>
<h1>Detect Faces:</h1>
<br><b>Image to analyze:</b><input type="file" id="myImage" />
</div>
<div id="wrapper" style="width:1020px; display:table;">
<div id="jsonOutput" style="width:600px; display:table-cell;">
<br><b>Response:</b><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="sourceImage" width="400" />
</div>
</div>
</body>
<script>
$(document).ready(function() {
$('#myImage').change(function() {
//Load everything in
var reader = new FileReader();
var file = this.files[0];
reader.onload = function() {
var resultData = this.result;
resultData = resultData.split(',')[1];
processImage(resultData);
};
reader.readAsDataURL(file);
});
processImage = function(binaryImage) {
$.ajax({
url: baseURL + "?" + $.param(params),
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));
})
}
});
//This function is taken from
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;
}
</script>
</html>