Added file-input example
Christoph Oberhofer
9 years ago
parent
1f3ff9bc70
commit
5c2295e103
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>index</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="Christoph Oberhofer" />
|
||||
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/prism.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="headline">
|
||||
<h1>QuaggaJS</h1>
|
||||
<h2>An advanced barcode-scanner written in JavaScript</h2>
|
||||
</div>
|
||||
</header>
|
||||
<section id="container" class="container">
|
||||
<h3>Scan barcode to input-field</h3>
|
||||
<p>Click the <strong>button</strong> next to the input-field
|
||||
to select a file or snap a picture</p>
|
||||
<div>
|
||||
<form>
|
||||
<div class="input-field">
|
||||
<label for="isbn_input">EAN:</label>
|
||||
<input id="isbn_input" class="isbn" type="text" />
|
||||
<button type="button" class="icon-barcode button scan"> </button>
|
||||
<input type="file" id="file" capture/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<p>This example demonstrates the following features:
|
||||
<ul>
|
||||
<li>Use static image as source</li>
|
||||
<li>Configuring EAN-Reader</li>
|
||||
<li>Use custom mount-point (Query-Selector)</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="source-code">
|
||||
<h4>Source</h4>
|
||||
<div class="collapsable-source">
|
||||
<pre>
|
||||
<code class="language-javascript">
|
||||
var Quagga = window.Quagga;
|
||||
var App = {
|
||||
_scanner: null,
|
||||
init: function() {
|
||||
this.attachListeners();
|
||||
},
|
||||
decode: function(src) {
|
||||
Quagga
|
||||
.decoder({readers: ['ean_reader']})
|
||||
.locator({patchSize: 'medium'})
|
||||
.fromImage(src, {size: 800})
|
||||
.toPromise()
|
||||
.then(function(result) {
|
||||
document.querySelector('input.isbn').value = result.codeResult.code;
|
||||
})
|
||||
.catch(function() {
|
||||
console.log("Not found!");
|
||||
})
|
||||
.then(function() {
|
||||
this.attachListeners();
|
||||
}.bind(this));
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
document.querySelector('.input-field input + .button.scan')
|
||||
.addEventListener("click", function onClick(e) {
|
||||
e.preventDefault();
|
||||
e.target.removeEventListener("click", onClick);
|
||||
document.querySelector('.input-field input[type=file]').click();
|
||||
});
|
||||
document.querySelector('.input-field input[type=file]')
|
||||
.addEventListener("change", function onChange(e) {
|
||||
e.preventDefault();
|
||||
e.target.removeEventListener("change", onChange);
|
||||
if (e.target.files && e.target.files.length) {
|
||||
self.decode(URL.createObjectURL(e.target.files[0]));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
App.init();
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="collapsable-source">
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<form>
|
||||
<div class="input-field">
|
||||
<label for="isbn_input">EAN:</label>
|
||||
<input id="isbn_input" class="isbn" type="text" />
|
||||
<button type="button" class="icon-barcode button scan">&nbsp;</button>
|
||||
<input type="file" id="file" capture/>
|
||||
</div>
|
||||
</form>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
© Copyright by Christoph Oberhofer
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="../../dist/quagga.js" type="text/javascript"></script>
|
||||
<script src="index.js" type="text/javascript"></script>
|
||||
<script src="../vendor/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
var Quagga = window.Quagga;
|
||||
var App = {
|
||||
_scanner: null,
|
||||
init: function() {
|
||||
this.attachListeners();
|
||||
},
|
||||
decode: function(src) {
|
||||
Quagga
|
||||
.decoder({readers: ['ean_reader']})
|
||||
.locator({patchSize: 'medium'})
|
||||
.fromImage(src, {size: 800})
|
||||
.toPromise()
|
||||
.then(function(result) {
|
||||
document.querySelector('input.isbn').value = result.codeResult.code;
|
||||
})
|
||||
.catch(function() {
|
||||
console.log("Not found!");
|
||||
})
|
||||
.then(function() {
|
||||
this.attachListeners();
|
||||
}.bind(this));
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
document.querySelector('.input-field input + .button.scan')
|
||||
.addEventListener("click", function onClick(e) {
|
||||
e.preventDefault();
|
||||
e.target.removeEventListener("click", onClick);
|
||||
document.querySelector('.input-field input[type=file]').click();
|
||||
});
|
||||
document.querySelector('.input-field input[type=file]')
|
||||
.addEventListener("change", function onChange(e) {
|
||||
e.preventDefault();
|
||||
e.target.removeEventListener("change", onChange);
|
||||
if (e.target.files && e.target.files.length) {
|
||||
self.decode(URL.createObjectURL(e.target.files[0]));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
App.init();
|
||||
Loading…
Reference in New Issue