javascript - pdf417 Javascript 阅读/解码

Question

我的任务是为基于 Web 的应用程序添加 pdf417(驾驶执照)解码/阅读。

输入:驾驶执照的图像。 (400-600dpi)

处理:检测/解析 pdf417 数据。

输出:解析pdf417数据。

限制:它是一个基于网络的应用程序，运行于:IE、Chrome、Safari。我无法在本地机器上安装任何东西。

所以我已经研究了几天了，但我还没有想出一个好的方法来完成这项工作。理想情况下，整个解码将使用 Javascript/Jquery 在客户端机器上进行。但是我没有发现可以执行此操作的脚本/库。我发现的唯一其他选项可能是 java servlet 或 php 扩展；两者都不理想，因为上传时间会使我超出分配的时间。

有人知道可以处理这个问题的任何 javascript 或 JQuery 库吗？

或者也许是一种更好的方法来合并我没有看到的这个功能？

Answer 1

我的贡献是双重的。首先(好消息!)我 100% 肯定你想要使用 JavaScript 做的事情是可以实现的 警告:Chrome/Firefox 可能一切正常，但它只能在更现代的 Safari (6+) 和 IE (IE10+) 版本中工作).来源http://caniuse.com/filereader

其次，我希望我的贡献能让您在解决问题方面走得更远，尽管我承认我还没有想出 PDF417 图像读取算法，这将是拼图的最后一 block 。

好的，我们开始:a) 让 JavaScript(在客户端机器上运行)向用户呈现一个 GUI 以允许他们从他们的本地文件系统中选择一个文件(他们的驾驶执照的照片)然后......b) 将其带入 JavaScript 应用程序(全部不涉及服务器或 Java)；和 ...c) ...让 JavaScript 对其进行解析并解释 PDF417 条形码的深色/浅色模式，以推断其中编码的“纯文本”人类可读数据。我提到 Java 不是一个选项，因为 Java applet 似乎永远不会被允许在 Chrome 中运行，尽管 Java 有一个很好的图像数据处理包，可以很好地解决这个问题。

a) 所需的理解和代码

多年来，HTML 表单允许程序员使用文件上传字段。你需要:

<input type="file" id="myFileInput">

b) 所需的理解和代码

此外，在 JavaScript 方面，您需要(最重要的)使用 HTML5 FileReader Api(请参阅 http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api)......相对于:

var reader = new FileReader();
// ... and ...
reader.readAsDataURL(file);

readAsDataURL() 将为您提供 base64 编码的二进制数据，当涉及插入到使用 var ing = new Image(); 实例化的图像实例。即将 src 设置为 data:image/gif;base64,*data* 完成后，您至少可以在网页中显示驾驶执照。稍后我提到获取这个新实例化的图像并通过 Canvas 的 2D 上下文显示作为仅将新图像附加到 DOM 中的替代方法，但我们稍后会谈到这一点。到目前为止，我所讨论的所有内容都可以在 blog.teamtreehouse.com 的代码笔演示 (http://codepen.io/matt-west/pen/CfilG) 上的操作中看到。此外，对于 FileReader() 的更初学者友好的讨论，您可能想观看此视频 ( http://www.sitepoint.com/reading-images-data-using-canvas-javascript/ )，但请耐心等待，因为您只需要 5 分钟 30 秒提及您想要的关于图像上传和显示的内容中。

c) 所需的理解和代码

这让我很困惑，因为我没能准确找到你想要的东西，但我确实找到了 UPC 格式条码:http://badassjs.com/post/654334959/barcode-scanning-in-javascript (演示 = http://tobeytailor.s3.amazonaws.com/get_barcode_from_image/index.html)。我不确定，但我认为要实现此目标，Tobey 必须蚕食来自 new Image() 的数据(一旦其 src 已通过 fileReader() API) 并在 Canvas 2d 上下文中使用它。它证明它可以完成，但在编写算法以了解如何解释数据时，您必须了解 PDF417:我发现这些链接是有用的起点

http://en.wikipedia.org/wiki/PDF417

http://omniplanar.com/PDF417-2D-Barcode.php

祝你好运!