pdf417 Javascript Reading / Decoding

Question

I have been tasked with adding in pdf417 (Driving License) decoding / reading for a web based application.

Input: Image of driving licenses. (400-600 dpi)

Processing: Detecting/Parsing of pdf417 data.

Output: Parse pdf417 data.

Limitations: Its a web based app running via: IE, Chrome, Safari. I cant install anything on the local machine.

So I have been investigating for a few days now and I have not figured out a good way to make this work. Ideally the whole decoding would take place on the clients machine using Javascript/Jquery. However I have found no scripts / libraries that can do this. The only other options I have found was perhaps a java servlet or a php extension; both of which are not ideal because the upload time is going to push me over my time allot.

Does anyone know of any javascript or JQuery library that can handle this?

Or perhaps a better way to incorporate this functionality that I am not seeing?

Answer 1

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 srcto 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!