Added file-input example & updated static images
Christoph Oberhofer
11 years ago
@ -1,5 +1,5 @@
|
|||||||
name: QuaggaJS
|
name: QuaggaJS
|
||||||
markdown: redcarpet
|
markdown: redcarpet
|
||||||
|
baseurl: /quaggaJS
|
||||||
|
|
||||||
exclude: [node_modules]
|
exclude: [node_modules]
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1>Examples</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="{{ site.baseurl }}/examples/static_images.html">Demo with sample images</a></li>
|
||||||
|
<li><a href="{{ site.baseurl }}/examples/live_w_locator.html">Demo with live-stream</a> using <code>getUserMedia</code></li>
|
||||||
|
<li><a href="{{ site.baseurl }}/examples/file_input.html">Demo with file-input</a> showcasing a use for mobile</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 39 KiB |
@ -0,0 +1,30 @@
|
|||||||
|
---
|
||||||
|
layout: examples
|
||||||
|
title: Demo with file-input
|
||||||
|
showInMenu: false
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
<section id="container" class="container">
|
||||||
|
<h3>Working with file-input</h3>
|
||||||
|
<p>This example let's you select an image from your local filesystem. QuaggaJS then tries to decode the barcode using
|
||||||
|
the preferred method (<strong>Code128</strong> or <strong>EAN</strong>). There is no server interaction needed as the
|
||||||
|
file is simply accessed through the <a href="http://www.w3.org/TR/file-upload/">File API</a>.</p>
|
||||||
|
<p>This also works great on a wide range of mobile-phones where the camera access through <code>getUserMedia</code> is still very limited.</p>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="file" capture/>
|
||||||
|
<fieldset class="reader-group">
|
||||||
|
<label>Code128</label>
|
||||||
|
<input type="radio" name="reader" value="code_128" checked />
|
||||||
|
<label>EAN</label>
|
||||||
|
<input type="radio" name="reader" value="ean" />
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<div id="result_strip">
|
||||||
|
<ul class="thumbnails"></ul>
|
||||||
|
</div>
|
||||||
|
<div id="interactive" class="viewport"></div>
|
||||||
|
</section>
|
||||||
|
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||||
|
<script src="https://raw.githubusercontent.com/serratus/quaggaJS/master/dist/quagga.js?token=ABUVvugjRdStIMzGkd_hFXxHvXL2s9geks5UYn1zwA%3D%3D" type="text/javascript"></script>
|
||||||
|
<script src="file_input.js" type="text/javascript"></script>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
$(function() {
|
||||||
|
var App = {
|
||||||
|
init: function() {
|
||||||
|
App.attachListeners();
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
reader: "code_128",
|
||||||
|
length: 10
|
||||||
|
},
|
||||||
|
attachListeners: function() {
|
||||||
|
$(".controls input[type=file]").on("change", function(e) {
|
||||||
|
if (e.target.files && e.target.files.length) {
|
||||||
|
App.decode(URL.createObjectURL(e.target.files[0]));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".controls .reader-group").on("change", "input", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
App.detachListeners();
|
||||||
|
App.config.reader = e.target.value;
|
||||||
|
App.init();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
detachListeners: function() {
|
||||||
|
$(".controls input[type=file]").off("change");
|
||||||
|
$(".controls .reader-group").off("change", "input");
|
||||||
|
},
|
||||||
|
decode: function(src) {
|
||||||
|
Quagga.decodeSingle({
|
||||||
|
readers : [App.config.reader + '_reader'],
|
||||||
|
locate : true,
|
||||||
|
src : src
|
||||||
|
}, function(result) {});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
App.init();
|
||||||
|
|
||||||
|
Quagga.onDetected(function(result) {
|
||||||
|
var $node = null, canvas = Quagga.canvas.dom.image;
|
||||||
|
|
||||||
|
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
|
||||||
|
$node.find("img").attr("src", canvas.toDataURL());
|
||||||
|
$node.find("h4.code").html(result);
|
||||||
|
$("#result_strip ul.thumbnails").prepend($node);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,9 +1,32 @@
|
|||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
title: Examples
|
title: Examples
|
||||||
|
showInMenu: true
|
||||||
---
|
---
|
||||||
|
|
||||||
# Examples
|
Examples
|
||||||
|
========
|
||||||
|
|
||||||
- [Demo with sample images]({{ site.url }}/examples/static_images.html "Demo")
|
The following examples showcase some of features offered by QuaggaJS.
|
||||||
- [Demo with live-stream]({{ site.url }}/examples/live_w_locator.html "Demo") using `getUserMedia`
|
|
||||||
|
## Using static image files
|
||||||
|
|
||||||
|
[This example]({{ site.baseurl }}/examples/static_images.html) shows the capabilities of QuaggaJS using images taken under various conditions.
|
||||||
|
|
||||||
|
[]({{ site.baseurl }}/examples/static_images.html)
|
||||||
|
[]({{ site.baseurl }}/examples/static_images.html)
|
||||||
|
[]({{ site.baseurl }}/examples/static_images.html)
|
||||||
|
[]({{ site.baseurl }}/examples/static_images.html)
|
||||||
|
|
||||||
|
## Using the live-stream from your webcam
|
||||||
|
|
||||||
|
This is the preferred mode of using QuaggaJS. [This example]({{ site.baseurl }}/examples/live_w_locator.html) demonstrates the real-time decoding capabilities of QuaggaJS by using your
|
||||||
|
webcam as a barcode-scanner.
|
||||||
|
|
||||||
|
[]({{ site.baseurl }}/examples/live_w_locator.html)
|
||||||
|
|
||||||
|
## Using the File API
|
||||||
|
|
||||||
|
Instead of directly accessing the user's webcam, [this example]({{ site.baseurl }}/examples/file_input.html) shows you how to use QuaggaJS with the HTML5 File API to decode a pre-taken image.
|
||||||
|
|
||||||
|
[]({{ site.baseurl }}/examples/file_input.html)
|
||||||
|
Before Width: | Height: | Size: 570 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 710 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 674 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 797 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 736 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 774 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 748 KiB After Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 741 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 570 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 562 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 678 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 595 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 678 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 570 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 774 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 687 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 738 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 662 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 664 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 757 KiB After Width: | Height: | Size: 81 KiB |