在 HTML5 和跨浏览器中工作的二维码阅读器插件

Posted 2023-03-31

【中文标题】在 HTML5 和跨浏览器中工作的二维码阅读器插件

【英文标题】：QRcode reader plugin working within HTML5 and cross browser

【发布时间】：2015-04-22 09:03:13

【问题描述】：

我发现了一个非常简单但运行良好的二维码 generator 插件，可以在纯 jQuery 中运行。插件的名字是 jquery.qrcode。

下面是给定 url 时的工作原理：

 function showQR(url) 
        $('#qrcode').qrcode(
            "width": 100,
            "height": 100,
            "color": "#3a3",
            "text": url
        );

    

很简单吧？

现在，当我在网上搜索类似的 html5 二维码 reader 时，我能找到的只是对 Lazarsoft jsqrcode.js 的引用以及随附的 getUserMedia 在 iPhone (AFAIK) 上不可用。

除了有很多警告说明它不能正常工作，等等......

我需要的是一个jq插件，它可以顺利接入手机的摄像头，将焦点调到二维码并返回相应的url，不要大惊小怪，不要乱七八糟。

有什么线索吗？

【问题讨论】：

可能没有帮助，但您可以尝试this answer 在 ios 中获取图像。

正如路人所指出的，相机输入法的图片无处不在。您可以在支持它的浏览器上使用 getUserMedia，并在 iPhone 上回退到这种技术。获得图片后，您可以使用 fileReader API（iOS 支持）进行 QR 扫描

【参考方案1】：

正如路人所指出的，相机输入法的图片无处不在。您可以在支持它的浏览器上使用 getUserMedia，并在 iPhone 上回退到这种技术。获得图片后，您可以使用 fileReader API（iOS 支持）进行 QR 扫描

【参考方案2】：

mebjas/html5-qrcode 是开源的、跨平台的二维码和条形码阅读器。它可用于轻松地将二维码扫描集成到 Web 应用程序中。它支持使用摄像头扫描或从磁盘中选择图像（PC/Mac/Iphone/android 等）。

您可以在这里尝试演示：qrcode.minhazav.dev

您可以在这篇文章中找到更多信息：https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/

PS：我是作者