Skip to content

Instantly share code, notes, and snippets.

@PatD

PatD/poc.html

Created Mar 9, 2020
Embed
What would you like to do?
Azure Computer Vision API - Handwriting POC
<!DOCTYPE html>
<html>
<head>
<title>Text Recognition Sample</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body style="margin:1em;">
<h3>Azure ML Computer Vision - Check for Signature</h3>
<ol>
<li>
<button onclick="processImage('one')">Check Form 1 for Signature</button>
</li>
<li>
<button onclick="processImage('two')">Check Form 2 for Signature</button>
</li>
</ol>
<div id="wrapper" style="width:1020px; display:table;">
<div id="jsonOutput" style="width:600px; display:table-cell;">
Response:
<br><br>
<textarea id="responseTextArea" class="UIInput"
style="width:580px; height:400px;"></textarea>
<div id="bannerNotSigned" style="display:none;"><h1>&#x10102; NOT SIGNED</h1></div>
<div id="bannerSigned" style="display:none;"><h1>&#x2714; SIGNED</h1></div>
</div>
<div id="imageDiv" style="width:420px; display:table-cell;">
Source image:
<br><br>
<img id="sourceImage" width="400" style="border:1em solid white;" />
</div>
</div>
<script type="text/javascript">
var subscriptionKey = 'KEY';
var endpoint = 'URL TO ENDPOINT IN AZURE';
var uriBase = endpoint + "vision/v2.1/read/core/asyncBatchAnalyze";
var responseTextArea = document.getElementById('responseTextArea')
var bannerNotSigned = document.getElementById('bannerNotSigned')
var bannerSigned = document.getElementById('bannerSigned')
var documentImg = document.getElementById('sourceImage')
function docSigned(){
documentImg.style.border = "1em solid green"
bannerNotSigned.style.display = "none"
bannerSigned.style.display = "block"
}
function docUnSigned(){
documentImg.style.border = "1em solid red"
bannerNotSigned.style.display = "block"
bannerSigned.style.display = "none"
}
function processImage(formNum) {
documentImg.style.border = "1em solid white";
bannerNotSigned.style.display = "none"
bannerSigned.style.display = "none"
function getImageText(urlToRead){
responseTextArea.style.background = "url('/_layouts/images/gears_an.gif') no-repeat center center"
console.log(urlToRead)
// Now query this document's text
axios({
method: 'GET',
url: urlToRead,
headers: {
"content-type":"application/json",
"Ocp-Apim-Subscription-Key": subscriptionKey
}
}).then(function(response){
console.log(response.data)
if(response.data.status === "Running" || response.data.status === "NotStarted"){
console.log("running")
responseTextArea.innerHTML = "Analyzing image for signature...";
setTimeout(function(){
getImageText(urlToRead)
},5000)
}
else if(response.data.status === "Succeeded"){
responseTextArea.innerHTML = JSON.stringify(response, null, 2);
responseTextArea.style.background = "none"
console.log(response.data.recognitionResults["0"].lines)
if(response.data.recognitionResults["0"].lines[19].text === "Sample Signature"){
console.log("This document is signed")
docSigned()
} else {
console.log("Not Signed")
docUnSigned()
}
}
else {
alert("error")
}
});
;}
if(formNum === "one"){
var docName = 'file1.jpg'
} else {
var docName = 'file2.jpg'
}
// Display the image.
var sourceImageUrl = docName;
document.querySelector("#sourceImage").src = sourceImageUrl;
axios({
method: 'post',
url: uriBase,
headers: {
"content-type":"application/json",
"Ocp-Apim-Subscription-Key": subscriptionKey
},
data: '{"url": ' + '"' + sourceImageUrl + '"}'
})
.then(function (response) {
console.log(response.headers["operation-location"])
getImageText(response.headers["operation-location"])
})
.catch(function (error) {
alert("Error: " + error)
console.log(error);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.