Added file-input example & updated static images
Christoph Oberhofer
11 years ago
@ -1,5 +1,5 @@
|
||||
name: QuaggaJS
|
||||
markdown: redcarpet
|
||||
|
||||
baseurl: /quaggaJS
|
||||
|
||||
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
|
||||
title: Examples
|
||||
showInMenu: true
|
||||
---
|
||||
|
||||
# Examples
|
||||
Examples
|
||||
========
|
||||
|
||||
- [Demo with sample images]({{ site.url }}/examples/static_images.html "Demo")
|
||||
- [Demo with live-stream]({{ site.url }}/examples/live_w_locator.html "Demo") using `getUserMedia`
|
||||
The following examples showcase some of features offered by QuaggaJS.
|
||||
|
||||
## 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 |