Added scanning barcodes with a camera
This commit is contained in:
7
quagga2/quagga2-1.12.1/docs/examples/.eslintrc
Normal file
7
quagga2/quagga2-1.12.1/docs/examples/.eslintrc
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
}
|
||||
}
|
||||
86
quagga2/quagga2-1.12.1/docs/examples/camera_example.html
Normal file
86
quagga2/quagga2-1.12.1/docs/examples/camera_example.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>Camera</title>
|
||||
<script type="text/javascript">
|
||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
|
||||
|
||||
function getUserMedia(constraints, success, failure) {
|
||||
navigator.getUserMedia(constraints, function(stream) {
|
||||
var videoSrc = (window.URL && window.URL.createObjectURL(stream)) || stream;
|
||||
success.apply(null, [videoSrc]);
|
||||
}, failure);
|
||||
}
|
||||
|
||||
|
||||
function initCamera(constraints, video, callback) {
|
||||
getUserMedia(constraints, function (src) {
|
||||
video.src = src;
|
||||
video.addEventListener('loadeddata', function() {
|
||||
var attempts = 10;
|
||||
|
||||
function checkVideo() {
|
||||
if (attempts > 0) {
|
||||
if (video.videoWidth > 0 && video.videoHeight > 0) {
|
||||
console.log(video.videoWidth + "px x " + video.videoHeight + "px");
|
||||
video.play();
|
||||
callback();
|
||||
} else {
|
||||
window.setTimeout(checkVideo, 100);
|
||||
}
|
||||
} else {
|
||||
callback('Unable to play video stream.');
|
||||
}
|
||||
attempts--;
|
||||
}
|
||||
|
||||
checkVideo();
|
||||
}, false);
|
||||
}, function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
function copyToCanvas(video, ctx) {
|
||||
( function frame() {
|
||||
ctx.drawImage(video, 0, 0);
|
||||
window.requestAnimationFrame(frame);
|
||||
}());
|
||||
}
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
var constraints = {
|
||||
video: {
|
||||
mandatory: {
|
||||
minWidth: 1280,
|
||||
minHeight: 720
|
||||
}
|
||||
}
|
||||
},
|
||||
video = document.createElement('video'),
|
||||
canvas = document.createElement('canvas');
|
||||
|
||||
document.body.appendChild(video);
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
initCamera(constraints, video, function() {
|
||||
canvas.setAttribute('width', video.videoWidth);
|
||||
canvas.setAttribute('height', video.videoHeight);
|
||||
copyToCanvas(video, canvas.getContext('2d'));
|
||||
});
|
||||
}, false);
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<footer>
|
||||
Quagga2 Project © 2014-2025 Christoph Oberhofer, Eric Blade, and all other Contributors. See <a href="https://github.com/ericblade/quagga2/blob/master/package.json">package.json</a>. Licensed under MIT license. See <a href="https://github.com/ericblade/quagga2/blob/master/LICENSE">LICENSE</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
27
quagga2/quagga2-1.12.1/docs/examples/config.rb
Normal file
27
quagga2/quagga2-1.12.1/docs/examples/config.rb
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
# Require any additional compass plugins here.
|
||||
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "img"
|
||||
javascripts_dir = "js"
|
||||
fonts_dir="fonts"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# output_style = :expanded or :nested or :compact or :compressed
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
16
quagga2/quagga2-1.12.1/docs/examples/css/colors.css
Normal file
16
quagga2/quagga2-1.12.1/docs/examples/css/colors.css
Normal file
@@ -0,0 +1,16 @@
|
||||
@charset "UTF-8";
|
||||
/* LESS - http://lesscss.org style sheet */
|
||||
/* Palette color codes */
|
||||
/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
|
||||
/* Feel free to copy&paste color codes to your application */
|
||||
/* MIXINS */
|
||||
/* As hex codes */
|
||||
/* Main Primary color */
|
||||
/* Main Secondary color (1) */
|
||||
/* Main Secondary color (2) */
|
||||
/* As RGBa codes */
|
||||
/* Main Primary color */
|
||||
/* Main Secondary color (1) */
|
||||
/* Main Secondary color (2) */
|
||||
/* Generated by Paletton.com ├é┬® 2002-2014 */
|
||||
/* http://paletton.com */
|
||||
1
quagga2/quagga2-1.12.1/docs/examples/css/fonts.css
Normal file
1
quagga2/quagga2-1.12.1/docs/examples/css/fonts.css
Normal file
@@ -0,0 +1 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
|
||||
298
quagga2/quagga2-1.12.1/docs/examples/css/styles.css
Normal file
298
quagga2/quagga2-1.12.1/docs/examples/css/styles.css
Normal file
@@ -0,0 +1,298 @@
|
||||
@charset "UTF-8";
|
||||
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
|
||||
|
||||
body {
|
||||
background-color: #FFF;
|
||||
margin: 0px;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #1e1e1e;
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Cabin Condensed", sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #FFC600;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
header .headline {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header .headline h1 {
|
||||
color: #FFDD69;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header .headline h2 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #0A4DB7;
|
||||
color: #6C9CE8;
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 640px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#interactive.viewport {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
|
||||
#interactive.viewport canvas, video {
|
||||
float: left;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
|
||||
margin-left: -640px;
|
||||
}
|
||||
|
||||
.controls fieldset {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.controls .input-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.controls .input-group input, .controls .input-group button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.controls .reader-config-group {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.controls .reader-config-group label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.controls .reader-config-group label span {
|
||||
width: 9rem;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.controls:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
#result_strip {
|
||||
margin: 10px 0;
|
||||
border-top: 1px solid #EEE;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#result_strip > ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
width: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#result_strip > ul > li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#result_strip > ul > li .thumbnail {
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
border: 1px dashed #CCC;
|
||||
}
|
||||
|
||||
#result_strip > ul > li .thumbnail img {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
#result_strip > ul > li .thumbnail .caption {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#result_strip > ul > li .thumbnail .caption h4 {
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
height: 40px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#result_strip > ul:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.scanner-overlay {
|
||||
display: none;
|
||||
width: 640px;
|
||||
height: 510px;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
top: 50%;
|
||||
margin-top: -275px;
|
||||
left: 50%;
|
||||
margin-left: -340px;
|
||||
background-color: #FFF;
|
||||
-moz-box-shadow: #333333 0px 4px 10px;
|
||||
-webkit-box-shadow: #333333 0px 4px 10px;
|
||||
box-shadow: #333333 0px 4px 10px;
|
||||
}
|
||||
|
||||
.scanner-overlay > .header {
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.scanner-overlay > .header h4, .scanner-overlay > .header .close {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.scanner-overlay > .header h4 {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.scanner-overlay > .header .close {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
i.icon-24-scan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 24px;
|
||||
margin-top: 1px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
@media (max-width: 603px) {
|
||||
|
||||
#container {
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#container form.voucher-form input.voucher-code {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 603px) {
|
||||
|
||||
.reader-config-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reader-config-group label > span {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reader-config-group label > select, .reader-config-group label > input {
|
||||
max-width: calc(50% - 2px);
|
||||
}
|
||||
|
||||
#interactive.viewport {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
#interactive.viewport canvas, video {
|
||||
margin-top: -50px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
|
||||
margin-left: -300px;
|
||||
}
|
||||
|
||||
|
||||
#result_strip {
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#result_strip ul.thumbnails > li {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#result_strip ul.thumbnails > li .thumbnail .imgWrapper {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
|
||||
margin-top: -25px;
|
||||
width: 130px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 603px) {
|
||||
|
||||
.overlay.scanner {
|
||||
width: 640px;
|
||||
height: 510px;
|
||||
padding: 20px;
|
||||
margin-top: -275px;
|
||||
margin-left: -340px;
|
||||
background-color: #FFF;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.overlay.scanner > .header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.overlay.scanner > .header h4, .overlay.scanner > .header .close {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.overlay.scanner > .header .close {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
110
quagga2/quagga2-1.12.1/docs/examples/file_input.html
Normal file
110
quagga2/quagga2-1.12.1/docs/examples/file_input.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!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/styles.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>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">
|
||||
<fieldset class="input-group">
|
||||
<input type="file" accept="image/*" capture="camera"/>
|
||||
<button>Rerun</button>
|
||||
</fieldset>
|
||||
<fieldset class="reader-config-group">
|
||||
<label>
|
||||
<span>Barcode-Type</span>
|
||||
<select name="decoder_readers">
|
||||
<option value="code_128" selected="selected">Code 128</option>
|
||||
<option value="code_39">Code 39</option>
|
||||
<option value="code_39_vin">Code 39 VIN</option>
|
||||
<option value="ean">EAN</option>
|
||||
<option value="ean_extended">EAN-extended</option>
|
||||
<option value="ean_8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="upc_e">UPC-E</option>
|
||||
<option value="codabar">Codabar</option>
|
||||
<option value="i2of5">Interleaved 2 of 5</option>
|
||||
<option value="2of5">Standard 2 of 5</option>
|
||||
<option value="code_93">Code 93</option>
|
||||
<option value="pharmacode">Pharmacode</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Resolution (long side)</span>
|
||||
<select name="input-stream_size">
|
||||
<option value="320">320px</option>
|
||||
<option value="640">640px</option>
|
||||
<option selected="selected" value="800">800px</option>
|
||||
<option value="1280">1280px</option>
|
||||
<option value="1600">1600px</option>
|
||||
<option value="1920">1920px</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Patch-Size</span>
|
||||
<select name="locator_patch-size">
|
||||
<option value="x-small">x-small</option>
|
||||
<option value="small">small</option>
|
||||
<option value="medium">medium</option>
|
||||
<option selected="selected" value="large">large</option>
|
||||
<option value="x-large">x-large</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Half-Sample</span>
|
||||
<input type="checkbox" name="locator_half-sample" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Single Channel</span>
|
||||
<input type="checkbox" name="input-stream_single-channel" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Locate (barcode finder)</span>
|
||||
<input type="checkbox" checked="checked" name="locate" />
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport"></div>
|
||||
<div id="debug" class="detection"></div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
Quagga2 Project © 2014-2025 Christoph Oberhofer, Eric Blade, and all other Contributors. See <a href="https://github.com/ericblade/quagga2/blob/master/package.json">package.json</a>. Licensed under MIT license. See <a href="https://github.com/ericblade/quagga2/blob/master/LICENSE">LICENSE</a>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
|
||||
<script src="dist/quagga.min.js" type="text/javascript"></script>
|
||||
<script src="file_input.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
203
quagga2/quagga2-1.12.1/docs/examples/file_input.js
Normal file
203
quagga2/quagga2-1.12.1/docs/examples/file_input.js
Normal file
@@ -0,0 +1,203 @@
|
||||
$(function() {
|
||||
var App = {
|
||||
init: function() {
|
||||
App.syncCheckboxesFromState();
|
||||
App.attachListeners();
|
||||
},
|
||||
syncCheckboxesFromState: function() {
|
||||
var self = this;
|
||||
$(".controls .reader-config-group input[type=checkbox]").each(function() {
|
||||
var $checkbox = $(this),
|
||||
name = $checkbox.attr("name"),
|
||||
state = self._convertNameToState(name),
|
||||
value = self._accessByPath(self.state, state);
|
||||
$checkbox.prop("checked", !!value);
|
||||
});
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
$(".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 button").on("click", function(e) {
|
||||
var input = document.querySelector(".controls input[type=file]");
|
||||
if (input.files && input.files.length) {
|
||||
App.decode(URL.createObjectURL(input.files[0]));
|
||||
}
|
||||
});
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
state = self._convertNameToState(name);
|
||||
|
||||
console.log("Value of "+ state + " changed to " + value);
|
||||
self.setState(state, value);
|
||||
});
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
o[key] = val;
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
detachListeners: function() {
|
||||
$(".controls input[type=file]").off("change");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
$(".controls button").off("click");
|
||||
},
|
||||
decode: function(src) {
|
||||
var self = this,
|
||||
config = $.extend({}, self.state, {src: src});
|
||||
|
||||
Quagga.decodeSingle(config, function(result) {});
|
||||
},
|
||||
setState: function(path, value) {
|
||||
var self = this;
|
||||
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
value = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
|
||||
self._accessByPath(self.state, path, value);
|
||||
|
||||
console.log(JSON.stringify(self.state));
|
||||
App.detachListeners();
|
||||
App.init();
|
||||
},
|
||||
inputMapper: {
|
||||
inputStream: {
|
||||
size: function(value){
|
||||
return parseInt(value);
|
||||
}
|
||||
},
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
size: 800,
|
||||
singleChannel: false,
|
||||
area: {
|
||||
top: "30%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "30%",
|
||||
backgroundColor: "rgba(255,0,0,0.15)"
|
||||
}
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: true
|
||||
},
|
||||
decoder: {
|
||||
readers: [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
},
|
||||
locate: true,
|
||||
src: null
|
||||
}
|
||||
};
|
||||
|
||||
App.init();
|
||||
|
||||
function calculateRectFromArea(canvas, area) {
|
||||
var canvasWidth = canvas.width,
|
||||
canvasHeight = canvas.height,
|
||||
top = parseInt(area.top)/100,
|
||||
right = parseInt(area.right)/100,
|
||||
bottom = parseInt(area.bottom)/100,
|
||||
left = parseInt(area.left)/100;
|
||||
|
||||
top *= canvasHeight;
|
||||
right = canvasWidth - canvasWidth*right;
|
||||
bottom = canvasHeight - canvasHeight*bottom;
|
||||
left *= canvasWidth;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top,
|
||||
width: right - left,
|
||||
height: bottom - top
|
||||
};
|
||||
}
|
||||
|
||||
Quagga.onProcessed(function(result) {
|
||||
console.warn('* onProcessed', result);
|
||||
var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
drawingCanvas = Quagga.canvas.dom.overlay,
|
||||
area;
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
|
||||
if (App.state.inputStream.area) {
|
||||
area = calculateRectFromArea(drawingCanvas, App.state.inputStream.area);
|
||||
drawingCtx.strokeStyle = "#0F0";
|
||||
drawingCtx.strokeRect(area.x, area.y, area.width, area.height);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Quagga.onDetected(function(result) {
|
||||
console.warn('* onDetected', result);
|
||||
var code = result.codeResult.code,
|
||||
$node,
|
||||
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(code);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-001.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-001.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-002.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-002.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-003.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-003.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-004.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-004.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-005.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-005.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-006.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-006.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-007.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-007.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-008.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-008.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-009.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-009.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-010.jpg
Normal file
BIN
quagga2/quagga2-1.12.1/docs/examples/fixtures/ean/image-010.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
31
quagga2/quagga2-1.12.1/docs/examples/index.html
Normal file
31
quagga2/quagga2-1.12.1/docs/examples/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Quagga2 Live Examples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Quagga2 Live Examples</h1>
|
||||
<p>Choose an example to try out Quagga2 in your browser:</p>
|
||||
</header>
|
||||
<main>
|
||||
<ul>
|
||||
<li><a href="camera_example.html">Camera Example</a></li>
|
||||
<li><a href="file_input.html">File Input Example</a></li>
|
||||
<li><a href="live_w_locator.html">Live with Locator Example</a></li>
|
||||
<li><a href="static_images.html">Static Images Example</a></li>
|
||||
</ul>
|
||||
<h2>Node.js Examples</h2>
|
||||
<ul>
|
||||
<li><a href="node-test.js">Node Test</a></li>
|
||||
<li><a href="node-test-with-buffer.js">Node Test with Buffer</a></li>
|
||||
</ul>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Quagga2 Project © 2014-2025 Christoph Oberhofer, Eric Blade, and all other Contributors. See <a href="https://github.com/ericblade/quagga2/blob/master/package.json">package.json</a>. Licensed under MIT license. See <a href="https://github.com/ericblade/quagga2/blob/master/LICENSE">LICENSE</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
116
quagga2/quagga2-1.12.1/docs/examples/live_w_locator.html
Normal file
116
quagga2/quagga2-1.12.1/docs/examples/live_w_locator.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!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, user-scalable=no" />
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.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>The user's camera</h3>
|
||||
<p>If your platform supports the <strong>getUserMedia</strong> API call, you can try the real-time locating and decoding features.
|
||||
Simply allow the page to access your web-cam and point it to a barcode. You can switch between <strong>Code128</strong>
|
||||
and <strong>EAN</strong> to test different scenarios.
|
||||
It works best if your camera has built-in auto-focus.
|
||||
</p>
|
||||
<div class="controls">
|
||||
<fieldset class="input-group">
|
||||
<button class="stop">Stop</button>
|
||||
</fieldset>
|
||||
<fieldset class="reader-config-group">
|
||||
<label>
|
||||
<span>Barcode-Type</span>
|
||||
<select name="decoder_readers">
|
||||
<option value="code_128" selected="selected">Code 128</option>
|
||||
<option value="code_39">Code 39</option>
|
||||
<option value="code_39_vin">Code 39 VIN</option>
|
||||
<option value="ean">EAN</option>
|
||||
<option value="ean_extended">EAN-extended</option>
|
||||
<option value="ean_8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="upc_e">UPC-E</option>
|
||||
<option value="codabar">Codabar</option>
|
||||
<option value="i2of5">Interleaved 2 of 5</option>
|
||||
<option value="2of5">Standard 2 of 5</option>
|
||||
<option value="code_93">Code 93</option>
|
||||
<option value="pharmacode">Pharmacode</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Resolution (width)</span>
|
||||
<select name="input-stream_constraints">
|
||||
<option value="320x240">320px</option>
|
||||
<option selected="selected" value="640x480">640px</option>
|
||||
<option value="800x600">800px</option>
|
||||
<option value="1280x720">1280px</option>
|
||||
<option value="1600x960">1600px</option>
|
||||
<option value="1920x1080">1920px</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Patch-Size</span>
|
||||
<select name="locator_patch-size">
|
||||
<option value="x-small">x-small</option>
|
||||
<option value="small">small</option>
|
||||
<option selected="selected" value="medium">medium</option>
|
||||
<option value="large">large</option>
|
||||
<option value="x-large">x-large</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Half-Sample</span>
|
||||
<input type="checkbox" checked="checked" name="locator_half-sample" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Locate (barcode finder)</span>
|
||||
<input type="checkbox" checked="checked" name="locate" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Camera</span>
|
||||
<select name="input-stream_constraints" id="deviceSelection">
|
||||
</select>
|
||||
</label>
|
||||
<label style="display: none">
|
||||
<span>Zoom</span>
|
||||
<select name="settings_zoom"></select>
|
||||
</label>
|
||||
<label style="display: none">
|
||||
<span>Torch</span>
|
||||
<input type="checkbox" name="settings_torch" />
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
<ul class="collector"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport"></div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
© Made with ❤️ by Christoph Oberhofer
|
||||
</p>
|
||||
<p>
|
||||
Quagga2 Project © 2014-2025 Christoph Oberhofer, Eric Blade, and all other Contributors. See <a href="https://github.com/ericblade/quagga2/blob/master/package.json">package.json</a>. Licensed under MIT license. See <a href="https://github.com/ericblade/quagga2/blob/master/LICENSE">LICENSE</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
|
||||
<script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
|
||||
<script src="dist/quagga.min.js" type="text/javascript"></script>
|
||||
<script src="live_w_locator.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
402
quagga2/quagga2-1.12.1/docs/examples/live_w_locator.js
Normal file
402
quagga2/quagga2-1.12.1/docs/examples/live_w_locator.js
Normal file
@@ -0,0 +1,402 @@
|
||||
$(function() {
|
||||
var resultCollector = Quagga.ResultCollector.create({
|
||||
capture: true,
|
||||
capacity: 20,
|
||||
blacklist: [{
|
||||
code: "WIWV8ETQZ1", format: "code_93"
|
||||
}, {
|
||||
code: "EH3C-%GU23RK3", format: "code_93"
|
||||
}, {
|
||||
code: "O308SIHQOXN5SA/PJ", format: "code_93"
|
||||
}, {
|
||||
code: "DG7Q$TV8JQ/EN", format: "code_93"
|
||||
}, {
|
||||
code: "VOFD1DB5A.1F6QU", format: "code_93"
|
||||
}, {
|
||||
code: "4SO64P4X8 U4YUU1T-", format: "code_93"
|
||||
}],
|
||||
filter: function(codeResult) {
|
||||
// only store results which match this constraint
|
||||
// e.g.: codeResult
|
||||
return true;
|
||||
}
|
||||
});
|
||||
var App = {
|
||||
_initDebounceTimer: null,
|
||||
_pendingReinit: false,
|
||||
init: function() {
|
||||
var self = this;
|
||||
Quagga.init(this.state, function(err) {
|
||||
if (err) {
|
||||
return self.handleError(err);
|
||||
}
|
||||
//Quagga.registerResultCollector(resultCollector);
|
||||
App.attachListeners();
|
||||
Quagga.start();
|
||||
App.initCameraSelection();
|
||||
App.checkCapabilities();
|
||||
// Sync UI checkboxes to match actual state after init
|
||||
$('input[name="locate"]').prop('checked', App.state.locate);
|
||||
});
|
||||
},
|
||||
reinit: function() {
|
||||
// Debounced reinit: cancel pending and schedule a new one
|
||||
console.log('[App.reinit] Called, current timer:', App._initDebounceTimer !== null, 'Current state.locate:', App.state.locate);
|
||||
if (App._initDebounceTimer) {
|
||||
console.log('[App.reinit] Cancelling pending init');
|
||||
clearTimeout(App._initDebounceTimer);
|
||||
}
|
||||
App._initDebounceTimer = setTimeout(function() {
|
||||
console.log('[App.reinit] Debounce expired, calling init() with state.locate:', App.state.locate);
|
||||
App._initDebounceTimer = null;
|
||||
App._pendingReinit = false;
|
||||
App.init();
|
||||
}, 250);
|
||||
},
|
||||
handleError: function(err) {
|
||||
console.log(err);
|
||||
// If we attempted to open a specific device and failed, revert to last known-good constraints
|
||||
try {
|
||||
var attempted = (App.state && App.state.inputStream && App.state.inputStream.constraints) || {};
|
||||
var hadSpecificDevice = attempted && attempted.deviceId;
|
||||
if (hadSpecificDevice) {
|
||||
// Detach to avoid stacked handlers
|
||||
// Try reinitializing to restore a working stream
|
||||
Quagga.stop();
|
||||
App.init();
|
||||
}
|
||||
} catch(e2) {
|
||||
// Ignore and leave UI available for user to pick another device
|
||||
}
|
||||
},
|
||||
checkCapabilities: function() {
|
||||
var track = Quagga.CameraAccess.getActiveTrack();
|
||||
var capabilities = {};
|
||||
if (typeof track.getCapabilities === 'function') {
|
||||
capabilities = track.getCapabilities();
|
||||
}
|
||||
this.applySettingsVisibility('zoom', capabilities.zoom);
|
||||
this.applySettingsVisibility('torch', capabilities.torch);
|
||||
},
|
||||
updateOptionsForMediaRange: function(node, range) {
|
||||
console.log('updateOptionsForMediaRange', node, range);
|
||||
var NUM_STEPS = 6;
|
||||
var stepSize = (range.max - range.min) / NUM_STEPS;
|
||||
var option;
|
||||
var value;
|
||||
while (node.firstChild) {
|
||||
node.removeChild(node.firstChild);
|
||||
}
|
||||
for (var i = 0; i <= NUM_STEPS; i++) {
|
||||
value = range.min + (stepSize * i);
|
||||
option = document.createElement('option');
|
||||
option.value = value;
|
||||
option.innerHTML = value;
|
||||
node.appendChild(option);
|
||||
}
|
||||
},
|
||||
applySettingsVisibility: function(setting, capability) {
|
||||
// depending on type of capability
|
||||
if (typeof capability === 'boolean') {
|
||||
var node = document.querySelector('input[name="settings_' + setting + '"]');
|
||||
if (node) {
|
||||
node.parentNode.style.display = capability ? 'block' : 'none';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (window.MediaSettingsRange && capability instanceof window.MediaSettingsRange) {
|
||||
var node = document.querySelector('select[name="settings_' + setting + '"]');
|
||||
if (node) {
|
||||
this.updateOptionsForMediaRange(node, capability);
|
||||
node.parentNode.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
initCameraSelection: function(){
|
||||
var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
|
||||
var selectedDeviceId = null;
|
||||
try {
|
||||
// Prefer explicit deviceId from current state if present
|
||||
var constraints = (this.state && this.state.inputStream && this.state.inputStream.constraints) || {};
|
||||
if (constraints.deviceId) {
|
||||
selectedDeviceId = (typeof constraints.deviceId === 'object' && constraints.deviceId.exact) ? constraints.deviceId.exact : constraints.deviceId;
|
||||
} else {
|
||||
selectedDeviceId = null;
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
return Quagga.CameraAccess.enumerateVideoDevices()
|
||||
.then(function(devices) {
|
||||
function pruneText(text) {
|
||||
return text.length > 30 ? text.substr(0, 30) : text;
|
||||
}
|
||||
var $deviceSelection = document.getElementById("deviceSelection");
|
||||
while ($deviceSelection.firstChild) {
|
||||
$deviceSelection.removeChild($deviceSelection.firstChild);
|
||||
}
|
||||
devices.forEach(function(device) {
|
||||
var $option = document.createElement("option");
|
||||
$option.value = device.deviceId || device.id;
|
||||
$option.appendChild(document.createTextNode(pruneText(device.label || device.deviceId || device.id)));
|
||||
// Preserve explicit selection by deviceId when available; fallback to stream label
|
||||
if (selectedDeviceId) {
|
||||
$option.selected = ($option.value === selectedDeviceId);
|
||||
} else {
|
||||
$option.selected = (streamLabel === device.label);
|
||||
}
|
||||
$deviceSelection.appendChild($option);
|
||||
});
|
||||
});
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
console.log('[App.attachListeners] Called - this should only happen once per init');
|
||||
self.initCameraSelection();
|
||||
|
||||
// Remove any existing handlers to prevent stacking
|
||||
$(".controls").off("click", "button.stop");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
|
||||
$(".controls").on("click", "button.stop", function(e) {
|
||||
e.preventDefault();
|
||||
Quagga.stop();
|
||||
self._printCollectedResults();
|
||||
});
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
state = self._convertNameToState(name);
|
||||
|
||||
console.log("Value of "+ state + " changed to " + value, "checkbox checked prop:", $target.prop("checked"), "target type:", $target.attr("type"));
|
||||
self.setState(state, value);
|
||||
});
|
||||
},
|
||||
_printCollectedResults: function() {
|
||||
var results = resultCollector.getResults(),
|
||||
$ul = $("#result_strip ul.collector");
|
||||
|
||||
results.forEach(function(result) {
|
||||
var $li = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
|
||||
|
||||
$li.find("img").attr("src", result.frame);
|
||||
$li.find("h4.code").html(result.codeResult.code + " (" + result.codeResult.format + ")");
|
||||
$ul.prepend($li);
|
||||
});
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
if (typeof o[key] === "object" && typeof val === "object") {
|
||||
Object.assign(o[key], val);
|
||||
} else {
|
||||
o[key] = val;
|
||||
}
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
detachListeners: function() {
|
||||
$(".controls").off("click", "button.stop");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
},
|
||||
applySetting: function(setting, value) {
|
||||
var track = Quagga.CameraAccess.getActiveTrack();
|
||||
if (track && typeof track.getCapabilities === 'function') {
|
||||
switch (setting) {
|
||||
case 'zoom':
|
||||
return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
|
||||
case 'torch':
|
||||
return track.applyConstraints({advanced: [{torch: !!value}]});
|
||||
}
|
||||
}
|
||||
},
|
||||
setState: function(path, value) {
|
||||
var self = this;
|
||||
|
||||
console.log('[App.setState] ENTRY: path=', path, 'value=', value, 'current state.locate=', self.state.locate);
|
||||
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
value = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
|
||||
if (path.startsWith('settings.')) {
|
||||
var setting = path.substring(9);
|
||||
return self.applySetting(setting, value);
|
||||
}
|
||||
// If switching cameras, replace constraints entirely with { deviceId: { exact } }
|
||||
if (path === 'inputStream.constraints' && value && typeof value === 'object' && 'deviceId' in value && Object.keys(value).length === 1) {
|
||||
if (!self.state.inputStream) self.state.inputStream = {};
|
||||
var dev = value.deviceId;
|
||||
self.state.inputStream.constraints = { deviceId: (typeof dev === 'object' ? dev : { exact: dev }) };
|
||||
} else {
|
||||
self._accessByPath(self.state, path, value);
|
||||
}
|
||||
|
||||
console.log('[App.setState] AFTER _accessByPath: state.locate=', self.state.locate);
|
||||
console.log(JSON.stringify(self.state));
|
||||
|
||||
console.log('[App.setState] path:', path, 'pending:', App._pendingReinit);
|
||||
// Prevent overlapping stop/reinit sequences
|
||||
if (App._pendingReinit) {
|
||||
// Already stopping/reiniting, just update the debounce timer
|
||||
console.log('[App.setState] Already pending, just updating debounce');
|
||||
App.reinit();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[App.setState] Calling stop and scheduling reinit');
|
||||
App._pendingReinit = true;
|
||||
App.detachListeners();
|
||||
var stopResult = Quagga.stop();
|
||||
if (stopResult && typeof stopResult.then === 'function') {
|
||||
stopResult.then(function(){
|
||||
console.log('[App.setState] Stop completed (promise), calling reinit');
|
||||
App.reinit();
|
||||
});
|
||||
} else {
|
||||
// Older sync stop; reinit with debounce
|
||||
console.log('[App.setState] Stop completed (sync), calling reinit');
|
||||
App.reinit();
|
||||
}
|
||||
},
|
||||
inputMapper: {
|
||||
inputStream: {
|
||||
constraints: function(value){
|
||||
if (/^(\d+)x(\d+)$/.test(value)) {
|
||||
var values = value.split('x');
|
||||
// Update resolution while preserving any existing deviceId selection
|
||||
var current = App.state && App.state.inputStream && App.state.inputStream.constraints || {};
|
||||
var next = {
|
||||
width: {min: parseInt(values[0])},
|
||||
height: {min: parseInt(values[1])}
|
||||
};
|
||||
if (current.deviceId) {
|
||||
next.deviceId = current.deviceId;
|
||||
}
|
||||
return next;
|
||||
}
|
||||
// Switching camera: use ONLY deviceId with exact match to avoid conflicting constraints
|
||||
return { deviceId: { exact: value } };
|
||||
}
|
||||
},
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
type : "LiveStream",
|
||||
constraints: {
|
||||
width: {min: 640},
|
||||
height: {min: 480},
|
||||
facingMode: "environment",
|
||||
aspectRatio: {min: 1, max: 2}
|
||||
},
|
||||
area: {
|
||||
top: "30%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "30%",
|
||||
// borderColor: "#0F0",
|
||||
// borderWidth: 2,
|
||||
backgroundColor: "rgba(255,0,0,0.15)"
|
||||
}
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: true
|
||||
},
|
||||
frequency: 10,
|
||||
decoder: {
|
||||
readers : [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
},
|
||||
locate: true
|
||||
},
|
||||
lastResult : null
|
||||
};
|
||||
|
||||
console.log('[Startup] Calling initial App.reinit()');
|
||||
App.reinit();
|
||||
|
||||
var processedCount = 0;
|
||||
Quagga.onProcessed(function(result) {
|
||||
processedCount++;
|
||||
/*
|
||||
console.log('onProcessed #' + processedCount + ':', result ? {
|
||||
hasBox: !!result.box,
|
||||
boxLength: result.box ? result.box.length : 0,
|
||||
hasBoxes: !!result.boxes,
|
||||
boxesLength: result.boxes ? result.boxes.length : 0,
|
||||
codeResult: !!result.codeResult
|
||||
} : 'null result');
|
||||
*/
|
||||
var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "orange", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Quagga.onDetected(function(result) {
|
||||
var code = result.codeResult.code;
|
||||
|
||||
if (App.lastResult !== code) {
|
||||
App.lastResult = code;
|
||||
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(code);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
var Quagga = require('../lib/quagga').default;
|
||||
|
||||
var buffer = require('fs').readFileSync('../test/fixtures/code_128/image-001.jpg');
|
||||
|
||||
decode(buffer);
|
||||
function decode(buff){
|
||||
Quagga.decodeSingle({
|
||||
src: buff,
|
||||
numOfWorkers: 0,
|
||||
inputStream: {
|
||||
mime: "image/jpeg",
|
||||
size: 800,
|
||||
area: {
|
||||
top: "10%",
|
||||
right: "5%",
|
||||
left: "5%",
|
||||
bottom: "10%"
|
||||
}
|
||||
}
|
||||
}, function(result) {
|
||||
if (result.codeResult) {
|
||||
console.log("result", result.codeResult.code);
|
||||
} else {
|
||||
console.log("not detected");
|
||||
}
|
||||
});
|
||||
}
|
||||
21
quagga2/quagga2-1.12.1/docs/examples/node-test.js
Normal file
21
quagga2/quagga2-1.12.1/docs/examples/node-test.js
Normal file
@@ -0,0 +1,21 @@
|
||||
var Quagga = require('../lib/quagga').default;
|
||||
|
||||
Quagga.decodeSingle({
|
||||
src: "../test/fixtures/code_128/image-001.jpg",
|
||||
numOfWorkers: 0,
|
||||
inputStream: {
|
||||
size: 800,
|
||||
area: {
|
||||
top: "10%",
|
||||
right: "5%",
|
||||
left: "5%",
|
||||
bottom: "10%"
|
||||
}
|
||||
}
|
||||
}, function(result) {
|
||||
if(result.codeResult) {
|
||||
console.log("result", result.codeResult.code);
|
||||
} else {
|
||||
console.log("not detected");
|
||||
}
|
||||
});
|
||||
70
quagga2/quagga2-1.12.1/docs/examples/static_images.html
Normal file
70
quagga2/quagga2-1.12.1/docs/examples/static_images.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!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 href='http://fonts.googleapis.com/css?family=Ubuntu:400,700,300' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.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>Working with static images</h3>
|
||||
<p>This examples uses static image files as input which are loaded from the server on startup.
|
||||
The locating and decoding process takes place inside the browser.
|
||||
Hit the <strong>next</strong> button to try a different image. You can also switch between
|
||||
two different test-sets. Each of those contains 10 images, demonstrating the capabilities of decoding
|
||||
<strong>Code128</strong> and <strong>EAN</strong> encoded barcodes.
|
||||
</p>
|
||||
<div class="controls">
|
||||
<fieldset class="input-group">
|
||||
<button class="next">Next</button>
|
||||
</fieldset>
|
||||
<fieldset class="reader-config-group">
|
||||
<span>Barcode-Type</span>
|
||||
<select name="decoder_readers;input-stream_src">
|
||||
<option value="code_128" selected="selected">Code 128</option>
|
||||
<option value="code_39">Code 39</option>
|
||||
<option value="code_39_vin">Code 39 VIN</option>
|
||||
<option value="ean">EAN</option>
|
||||
<option value="ean_extended">EAN-extended</option>
|
||||
<option value="ean_8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="upc_e">UPC-E</option>
|
||||
<option value="codabar">Codabar</option>
|
||||
<option value="i2of5">I2of5</option>
|
||||
<option value="i2of5">Interleaved 2 of 5</option>
|
||||
<option value="2of5">Standard 2 of 5</option>
|
||||
<option value="code_93">Code 93</option>
|
||||
<option value="pharmacode">Pharmacode</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport"></div>
|
||||
<div id="debug" class="detection"></div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
Quagga2 Project © 2014-2025 Christoph Oberhofer, Eric Blade, and all other Contributors. See <a href="https://github.com/ericblade/quagga2/blob/master/package.json">package.json</a>. Licensed under MIT license. See <a href="https://github.com/ericblade/quagga2/blob/master/LICENSE">LICENSE</a>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
|
||||
<script src="dist/quagga.min.js" type="text/javascript"></script>
|
||||
<script src="static_images.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
177
quagga2/quagga2-1.12.1/docs/examples/static_images.js
Normal file
177
quagga2/quagga2-1.12.1/docs/examples/static_images.js
Normal file
@@ -0,0 +1,177 @@
|
||||
$(function() {
|
||||
var App = {
|
||||
init: function() {
|
||||
var config = this.config[this.state.decoder.readers[0].format] || this.config.default;
|
||||
config = $.extend(true, {}, config, this.state);
|
||||
Quagga.init(config, function() {
|
||||
App.attachListeners();
|
||||
Quagga.start();
|
||||
});
|
||||
},
|
||||
config: {
|
||||
"default": {
|
||||
inputStream: { name: "Test",
|
||||
type: "ImageStream",
|
||||
length: 10,
|
||||
size: 800,
|
||||
area: {
|
||||
top: "30%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "30%",
|
||||
backgroundColor: "rgba(255,0,0,0.15)"
|
||||
}
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: true
|
||||
}
|
||||
},
|
||||
"i2of5_reader": {
|
||||
inputStream: {
|
||||
size: 800,
|
||||
type: "ImageStream",
|
||||
length: 5
|
||||
},
|
||||
locator: {
|
||||
patchSize: "small",
|
||||
halfSample: false
|
||||
}
|
||||
}
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
$(".controls").on("click", "button.next", function(e) {
|
||||
e.preventDefault();
|
||||
Quagga.start();
|
||||
});
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
states = self._convertNameToStates(name);
|
||||
|
||||
console.log("Value of "+ states + " changed to " + value);
|
||||
self.setState(states, value);
|
||||
});
|
||||
},
|
||||
detachListeners: function() {
|
||||
$(".controls").off("click", "button.next");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
o[key] = val;
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToStates: function(names) {
|
||||
return names.split(";").map(this._convertNameToState.bind(this));
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
setState: function(paths, value) {
|
||||
var self = this;
|
||||
|
||||
paths.forEach(function(path) {
|
||||
var mappedValue;
|
||||
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
mappedValue = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
self._accessByPath(self.state, path, mappedValue);
|
||||
});
|
||||
|
||||
console.log(JSON.stringify(self.state));
|
||||
App.detachListeners();
|
||||
Quagga.stop();
|
||||
App.init();
|
||||
},
|
||||
inputMapper: {
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
},
|
||||
inputStream: {
|
||||
src: function(value) {
|
||||
return "fixtures/" + value + "/"
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
src: "fixtures/code_128/"
|
||||
},
|
||||
decoder : {
|
||||
readers : [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
App.init();
|
||||
window.App = App;
|
||||
|
||||
Quagga.onProcessed(function(result) {
|
||||
var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Quagga.onDetected(function(result) {
|
||||
var $node,
|
||||
canvas = Quagga.canvas.dom.image,
|
||||
detectedCode = result.codeResult.code;
|
||||
|
||||
$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(detectedCode);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
});
|
||||
});
|
||||
4
quagga2/quagga2-1.12.1/docs/examples/vendor/jquery-1.9.0.min.js
vendored
Normal file
4
quagga2/quagga2-1.12.1/docs/examples/vendor/jquery-1.9.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user