0

我正在做一个项目，我必须从实时视频流中检测二维码，然后将其捕获为图像。我正在成功扫描二维码，但不知道如何检测它并将该区域捕获为图像？

这是我尝试过的：

<video id="preview"></video>

<script type="text/javascript">

    let scanner = new Instascan.Scanner({video: document.getElementById('preview')});
    scanner.addListener('scan', function (content) {
        alert(content);
    });
    Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
            scanner.start(cameras[0]);
        } else {
            console.error('No cameras found.');
        }
    }).catch(function (e) {
        console.error(e);
    });
</script>
4

2 回答 2

2

这是一个使用 jsQR 的演示： https ://cozmo.github.io/jsQR/ 我不知道 Instascan.Scanner 但我建议两者的工作方式相似。因此，您可以向您的 instascan 侦听器添加一个回调，然后读取捕获的二维码的尺寸并捕获它（如示例中所示：这里他们使用 window.requestAnimationFrame() 在捕获的二维码周围绘制边框）。

于 2020-04-27T12:10:45.113 回答
1

我可以建议您执行此操作的过程：

  1. 您可以检测到二维码。因此，您无需裁剪和展平照片，而是使用 qrcode.js 之类的 api 对其进行扫描并将其值保存为变量
  2. 然后你做一个空的画布
  3. 声明一个变量：var qrcode = new QRCode("qrcode");
  4. 您使用此代码将变量转换为另一个二维码：qrcode.makeCode(elText.value);
  5. 然后通过把它放在一个函数中运行这个命令：makeCode();
  6. 这会将其显示为画布中的图像。

    有关如何扫描二维码的参考，请参阅此链接：https
    ://blog.minhazav.dev/qr-code-scanner-using-html-and-javascript/ 有关如何在画布中显示它的参考，请参阅此链接：https://davidshimjs.github.io/qrcodejs/

    如果您想要一个工作代码示例，请分享您能够检测二维码的代码，我可以通过稍微编辑和分享来帮助您最后的代码和你一起。
于 2020-11-26T14:05:26.037 回答