My contribution is twofold. Firstly (Good news!) I am 100% certain that want you want to do using JavaScript is achievable CAVEAT: Chrome / Firefox will probably be all ok but it will only work in more modern versions of Safari (6+) and IE (IE10+). Source http://caniuse.com/filereader
Secondly I hope that my contribution gets you pretty far along in solving the problem although I admit I haven't come up with the PDF417 image reading algorithm that would be the final piece of the puzzle.
OK Here we go:
a) To have JavaScript (running on the client machines) present a GUI to the user to allow them to choose a file from their local file system (a picture of their driving license) and then...
b) Bring it into the JavaScript app (All without involving a server or Java); and ...
c) ...have JavaScript parse it and interpret the dark / light patterns of the PDF417 barcode to extrapolate the 'plaintext' human-readable data encoded therein. I mention Java not being an option as Java applets, it seems, will never be allowed to run in Chrome although Java has a nice Image data handling package which is well sorted to this thing.
Understanding and code required for a)
HTML forms have allowed programmers to use a file upload field for many years. You'll need:
<input type="file" id="myFileInput">
Understanding and code required for b)
Also, on the JavaScript side of things you'll need (most importantly) use of the HTML5 FileReader Api (see http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api) ...vis-a-vis:
var reader = new FileReader();
// ... and ...
reader.readAsDataURL(file);
Where readAsDataURL()
is going to give you the base64-encode binary data that is going to work for you when it comes to slotting into the src
property of an instance of an image instantiated with var ing = new Image();
. i.e. setting the src
to data:image/gif;base64,*data*
With that done you can at least display the driving license in your webpage. Later on I mention taking this newly instantiated image and displaying via Canvas's 2D context as an alternative to just appendChild()'ing the new image into the DOM but we'll come to that in a minute. All I've discussed so far can be see in an action on blog.teamtreehouse.com's code pen demo (http://codepen.io/matt-west/pen/CfilG). Also for a more beginner friendly talk-through of FileReader()
you may want to watch this video (http://www.sitepoint.com/reading-images-data-using-canvas-javascript/) but be patient as the stuff you want about the image upload and display only gets mentioned 5mins30secs in.
Understanding and code required for c)
This where I came unstuck as I did not manage to find exactly what you are after but I did find this for UPC format barcodes: http://badassjs.com/post/654334959/barcode-scanning-in-javascript (demo = http://tobeytailor.s3.amazonaws.com/get_barcode_from_image/index.html). I am not sure but I think that to achieve this Tobey has to cannibalise the data from the new Image()
(once its src
has been filled with data via the fileReader()
API) and use it on a Canvas 2d context. It proves that it can be done but in writing the algorithm to know how to interpret the data you'd have to understand PDF417: I found these links as useful starting places
http://en.wikipedia.org/wiki/PDF417
http://omniplanar.com/PDF417-2D-Barcode.php
Good luck!