-
Notifications
You must be signed in to change notification settings - Fork 68
/
demo-03-scan-pdf-form-upload.htm
136 lines (116 loc) · 5.49 KB
/
demo-03-scan-pdf-form-upload.htm
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scanner.js demo: Scan PDF to Form</title>
<meta charset='utf-8'>
<script src="https://cdn.asprise.com/scannerjs/scanner.js" type="text/javascript"></script>
<script>
//
// Please read scanner.js developer's guide at: http://asprise.com/document-scan-upload-image-browser/ie-chrome-firefox-scanner-docs.html
//
/** Scan: output PDF original and JPG thumbnails */
function scanToPdfWithThumbnails() {
scanner.scan(displayImagesOnPage,
{
"output_settings": [
{
"type": "return-base64",
"format": "pdf",
"pdf_text_line": "By ${USERNAME} on ${DATETIME}"
},
{
"type": "return-base64-thumbnail",
"format": "jpg",
"thumbnail_height": 200
}
]
}
);
}
/** Processes the scan result */
function displayImagesOnPage(successful, mesg, response) {
if(!successful) { // On error
console.error('Failed: ' + mesg);
return;
}
if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
console.info('User cancelled');
return;
}
var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
var scannedImage = scannedImages[i];
processOriginal(scannedImage);
}
var thumbnails = scanner.getScannedImages(response, false, true); // returns an array of ScannedImage
for(var i = 0; (thumbnails instanceof Array) && i < thumbnails.length; i++) {
var thumbnail = thumbnails[i];
processThumbnail(thumbnail);
}
}
/** Images scanned so far. */
var imagesScanned = [];
/** Processes an original */
function processOriginal(scannedImage) {
imagesScanned.push(scannedImage);
}
/** Processes a thumbnail */
function processThumbnail(scannedImage) {
var elementImg = scanner.createDomElementFromModel( {
'name': 'img',
'attributes': {
'class': 'scanned',
'src': scannedImage.src
}
});
document.getElementById('images').appendChild(elementImg);
}
/** Upload scanned images by submitting the form */
function submitFormWithScannedImages() {
if (scanner.submitFormWithImages('form1', imagesScanned, function (xhr) {
if (xhr.readyState == 4) { // 4: request finished and response is ready
document.getElementById('server_response').innerHTML = "<h2>Response from the server: </h2>" + xhr.responseText;
document.getElementById('images').innerHTML = ''; // clear images
imagesScanned = [];
}
})) {
document.getElementById('server_response').innerHTML = "Submitting, please stand by ...";
} else {
document.getElementById('server_response').innerHTML = "Form submission cancelled. Please scan first.";
}
}
</script>
<style>
img.scanned {
height: 200px; /** Sets the display size */
margin-right: 12px;
}
div#images {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Scanner.js: Scan PDF to Form and then Submit</h2>
<button type="button" onclick="scanToPdfWithThumbnails();">Scan</button>
<div id="images"></div>
<!-- Previous lines are same as demo-01, below is new addition to demo-02 -->
<form id="form1" action="https://asprise.com/scan/applet/upload.php?action=dump" method="POST" enctype="multipart/form-data" target="_blank" >
<input type="text" id="sample-field" name="sample-field" value="Test scan"/>
<input type="button" value="Submit" onclick="submitFormWithScannedImages();">
</form>
<div id="server_response"></div>
<!-- HELP_LINKS_START help links at the bottom -->
<style>
.asprise-footer, .asprise-footer a:visited { font-family: Arial, Helvetica, sans-serif; color: #999; font-size: 13px; }
.asprise-footer a { text-decoration: none; color: #999; }
.asprise-footer a:hover { padding-bottom: 2px; border-bottom: solid 1px #9cd; color: #06c; }
</style>
<div class="asprise-footer" style="margin-top: 48px;">
<a href="http://asprise.com/document-scan-upload-image-browser/direct-to-server-php-asp.net-overview.html" target="_blank" title="Opens in new tab">Scanner.js Homepage</a> |
<a href="http://asprise.com/scan/scannerjs/docs/html/scannerjs-javascript-guide.html" target="_blank" title="Opens in new tab">Developer's Guide to ScannerJs</a> |
<a href="https://github.com/Asprise/scannerjs.javascript-scanner-access-in-browsers-chrome-ie.scanner.js" target="_blank" title="Opens in new tab">Sample code on Github</a>
</div>
<!-- HELP_LINKS_END -->
</body>
</html>