D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
proc
/
thread-self
/
cwd
/
codbar
/
example
/
Filename :
file_input.html
back
Copy
<!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> </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>Workers</span> <select name="numOfWorkers"> <option value="0">0</option> <option selected="selected" value="1">1</option> </select> </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> © Copyright by Christoph Oberhofer </p> </footer> <script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script> <script src="../dist/quagga.js" type="text/javascript"></script> <script src="file_input.js" type="text/javascript"></script> </body> </html>