Aug-18-2022, 06:23 PM
Hello,
I am trying to capture an image from WebCam and show JSON containing image string and UserID on the next page when the user clicks the Upload button. Currently, the snap function is taking the image and working fine.
But When the users click on the Upload button, only UserID is showing in JSON.
Expected Output: Click on the Upload button will JSON containing User ID and Image String
Program flow
1. fill textbox
2. Click snap to capture image
3. Click upload button
4. upload button will call javascript upload function in HTML File
My Code
App.py File
I am trying to capture an image from WebCam and show JSON containing image string and UserID on the next page when the user clicks the Upload button. Currently, the snap function is taking the image and working fine.
But When the users click on the Upload button, only UserID is showing in JSON.
Expected Output: Click on the Upload button will JSON containing User ID and Image String
Program flow
1. fill textbox
2. Click snap to capture image
3. Click upload button
4. upload button will call javascript upload function in HTML File
My Code
App.py File
@app.route('/Test', methods=['GET','POST'])
def Test():
if request.method == 'POST':
#return jsonify(request.form['userID'],str(request.form['file']))
return jsonify(request.form)
#file = request.form['file']
#if len(file)==0:
# abc = 'no file'
#else:
# abc = 'This is file'
#return render_template('Test2.html',data=request.form['userID'])
return render_template('Test.html')
if __name__ == '__main__':
#app.run(host='127.0.0.9',port=4455,debug=True)
app.run(debug=True)HTML File Code (containing Javascript for WebCam work)<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js" integrity="sha512-dQIiHSl2hr3NWKKLycPndtpbh5iaHLo6MwrXm7F0FM5e+kL2U16oE9uIwPHUl6fQBeCthiEuV/rzP3MiAB8Vfw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form method="POST" enctype="multipart/form-data" id="myForm">
<table>
<tr>
<td>Name/EmailId</td>
<td><input type="text" name="userID"></td>
</tr>
</table>
<div id="my_camera"></div>
<input type="button" onclick="snap()" value="Snap">
<div id="results"></div>
<tr>
<td><input type="submit" onclick="upload()" value="Upload"></td>
</tr>
</form>
</body>
<script>
function ShowCam() {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#my_camera');
}
window.onload= ShowCam;
function snap() {
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<img id="image" name="img" src="'+data_uri+'"/>';
} );
}
function b64toBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}
function upload() {
console.log("Uploading...")
var image = document.getElementById('image').src;
//var blob = b64toBlob(image);
var form = document.getElementById('myForm');
var formData = new FormData(form);
formData.append("webcamfile", image);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","/Test",true);
// check when state changes,
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(formData);
console.log(formData);
console.log(formData.get('webcamfile'));
console.log(formData.get('userID'));
console.log('ALL IS OK')
}
</script>